fix: FAQ modal scrolling and standardize footers
## FAQ Modal Fixes - Fix modal scrolling: changed max-h-[85vh] to h-[85vh] with min-h-0 - Added flex-shrink-0 to modal header for proper flex behavior - Users can now scroll through all 30 FAQ questions (was stuck at 8) - Enhanced markdown parsing with error handling and fallback ## UI Improvements - Removed Quick Actions section from FAQ page per user request - Standardized footer across 7 user-facing pages - Added Newsletter link under Community section in all footers ## Pages Updated - faq.html, researcher.html, implementer.html, leader.html - about.html, media-inquiry.html, case-submission.html ## Version - Bumped to 1.0.4 with force update enabled - Service worker cache updated 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
98d2caa989
commit
a54eb6cffd
10 changed files with 935 additions and 217 deletions
|
|
@ -228,47 +228,54 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer with Te Tiriti Acknowledgment -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<!-- 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-4 gap-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm mb-3">
|
||||
Preserving human agency through architectural constraints, not aspirational goals.
|
||||
</p>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
<a href="mailto:research@agenticgovernance.digital" class="text-blue-400 hover:text-blue-300 transition">research@agenticgovernance.digital</a>
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</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 transition">Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<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/classification-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/about.html" class="hover:text-white transition">About</a></li>
|
||||
<li><a href="/about/values.html" class="hover:text-white transition">Values</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>
|
||||
<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-bold mb-4">Te Tiriti o Waitangi</h3>
|
||||
<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 is developed in Aotearoa New Zealand. We acknowledge <a href="/about/values.html#te-tiriti" class="text-blue-400 hover:text-blue-300 transition">Te Tiriti o Waitangi</a> and indigenous data sovereignty principles.
|
||||
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 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 License 2.0</a>. <a href="/about/values.html" class="text-blue-400 hover:text-blue-300 transition">Read our values</a>.</p>
|
||||
<p>© 2025 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 License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -214,30 +214,49 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-300 mt-16 py-12">
|
||||
<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-3 gap-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">
|
||||
AI safety through architectural constraints and human agency preservation.
|
||||
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">Quick Links</h3>
|
||||
<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="/about.html" class="hover:text-white transition">About</a></li>
|
||||
<li><a href="/about/values.html" class="hover:text-white transition">Values</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">Contact</h3>
|
||||
<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>
|
||||
|
|
|
|||
491
public/faq.html
491
public/faq.html
|
|
@ -41,7 +41,7 @@
|
|||
a:focus:not(:focus-visible) { outline: none; }
|
||||
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
||||
|
||||
/* FAQ expandable sections */
|
||||
/* FAQ expandable sections (modal) */
|
||||
.faq-item { transition: all 0.2s ease; }
|
||||
.faq-question { cursor: pointer; user-select: none; }
|
||||
.faq-answer {
|
||||
|
|
@ -56,6 +56,85 @@
|
|||
}
|
||||
.faq-item.open .faq-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* Inline FAQ expandable sections (main page) */
|
||||
.inline-faq-item { transition: all 0.2s ease; }
|
||||
.inline-faq-question { cursor: pointer; user-select: none; }
|
||||
.inline-faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.inline-faq-item.open .inline-faq-answer { max-height: none; }
|
||||
.inline-faq-item.open .faq-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* Inline FAQ Answer Prose Styling */
|
||||
.inline-faq-answer-content {
|
||||
line-height: 1.75;
|
||||
color: #374151;
|
||||
}
|
||||
.inline-faq-answer-content h1, .inline-faq-answer-content h2, .inline-faq-answer-content h3 {
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.inline-faq-answer-content h1 { font-size: 1.875rem; }
|
||||
.inline-faq-answer-content h2 { font-size: 1.5rem; }
|
||||
.inline-faq-answer-content h3 { font-size: 1.25rem; }
|
||||
.inline-faq-answer-content p { margin-bottom: 1.25em; }
|
||||
.inline-faq-answer-content strong { font-weight: 700; color: #111827; }
|
||||
.inline-faq-answer-content ul, .inline-faq-answer-content ol {
|
||||
margin: 1.25em 0;
|
||||
padding-left: 1.75em;
|
||||
list-style-position: outside;
|
||||
}
|
||||
.inline-faq-answer-content ul { list-style-type: disc; }
|
||||
.inline-faq-answer-content ol { list-style-type: decimal; }
|
||||
.inline-faq-answer-content li { margin-bottom: 0.5em; padding-left: 0.375em; }
|
||||
.inline-faq-answer-content li::marker { color: #3b82f6; font-weight: 600; }
|
||||
.inline-faq-answer-content a {
|
||||
color: #2563eb;
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.inline-faq-answer-content a:hover { color: #1d4ed8; }
|
||||
.inline-faq-answer-content code {
|
||||
background-color: #f3f4f6;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
font-family: 'Monaco', 'Courier New', monospace;
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
}
|
||||
.inline-faq-answer-content pre {
|
||||
background-color: #1e293b;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin: 1.5em 0;
|
||||
overflow-x: auto;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.inline-faq-answer-content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: #e2e8f0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
}
|
||||
.inline-faq-answer-content blockquote {
|
||||
border-left: 4px solid #3b82f6;
|
||||
padding-left: 1rem;
|
||||
margin: 1.5em 0;
|
||||
font-style: italic;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Search highlighting */
|
||||
.highlight { background-color: #fef08a; padding: 0 2px; }
|
||||
|
||||
|
|
@ -186,6 +265,31 @@
|
|||
list-style: none;
|
||||
margin-left: -1.75em;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
#search-modal, #search-tips-modal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-modal.show, #search-tips-modal.show {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Smooth modal animations */
|
||||
#search-modal > div, #search-tips-modal > div {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
|
|
@ -201,93 +305,103 @@
|
|||
<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-4">Frequently Asked Questions</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 mb-8">
|
||||
Common questions about Tractatus framework implementation, performance, and architecture
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search & Filters -->
|
||||
<div class="bg-white border-b border-gray-200 sticky top-0 z-10 shadow-sm">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Search -->
|
||||
<div class="mb-4">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="faq-search"
|
||||
placeholder="Search questions..."
|
||||
class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||
aria-label="Search FAQ"
|
||||
/>
|
||||
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<button type="button" id="open-search-modal-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition inline-flex items-center gap-2 shadow-lg" aria-label="Open search">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audience Filters -->
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button class="filter-pill active px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="all">
|
||||
All Questions
|
||||
</button>
|
||||
<button class="filter-pill px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="researcher">
|
||||
For Researchers
|
||||
</button>
|
||||
<button class="filter-pill px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="implementer">
|
||||
For Implementers
|
||||
</button>
|
||||
<button class="filter-pill px-4 py-2 rounded-full text-sm font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="leader">
|
||||
For Leaders
|
||||
<span>Search FAQ</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Results count -->
|
||||
<div id="results-count" class="mt-4 text-sm text-gray-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Content -->
|
||||
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-blue-50 rounded-lg p-6 mb-8">
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Quick Actions</h2>
|
||||
<!-- Browse by Audience (Interactive Filters) -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-6 mb-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Browse by Audience</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<a href="/downloads/tractatus-quickstart.tar.gz" class="flex items-center gap-2 text-blue-700 hover:text-blue-900 font-medium">
|
||||
<svg class="w-5 h-5" 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"/>
|
||||
</svg>
|
||||
Deployment Quickstart
|
||||
</a>
|
||||
<a href="/docs.html" class="flex items-center gap-2 text-blue-700 hover:text-blue-900 font-medium">
|
||||
<svg class="w-5 h-5" 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>
|
||||
Full Documentation
|
||||
</a>
|
||||
<a href="/demos/classification-demo.html" class="flex items-center gap-2 text-blue-700 hover:text-blue-900 font-medium">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"/>
|
||||
</svg>
|
||||
Interactive Demos
|
||||
</a>
|
||||
<button
|
||||
class="category-filter-btn text-left p-4 border-2 border-purple-200 rounded-lg hover:border-purple-400 hover:bg-purple-50 transition group"
|
||||
data-audience="researcher"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-purple-200 transition">
|
||||
<svg class="w-5 h-5 text-purple-600" 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>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-purple-900 transition">Researchers</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">Theory, validation, academic research</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:text-purple-600 transition flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="category-filter-btn text-left p-4 border-2 border-blue-200 rounded-lg hover:border-blue-400 hover:bg-blue-50 transition group"
|
||||
data-audience="implementer"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-blue-200 transition">
|
||||
<svg class="w-5 h-5 text-blue-600" 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>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-blue-900 transition">Implementers</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">Implementation, integration, deployment</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="category-filter-btn text-left p-4 border-2 border-green-200 rounded-lg hover:border-green-400 hover:bg-green-50 transition group"
|
||||
data-audience="leader"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-green-200 transition">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-semibold text-gray-900 group-hover:text-green-900 transition">Leaders</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">Strategic business, organizational leadership</p>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:text-green-600 transition flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-4 text-center">Click any category to see filtered questions in advanced search</p>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Sections -->
|
||||
<div id="faq-container">
|
||||
<!-- Section will be populated by JavaScript -->
|
||||
</div>
|
||||
|
||||
<!-- No results message -->
|
||||
<div id="no-results" class="hidden text-center py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-lg font-medium text-gray-900">No questions found</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Try adjusting your search or filter</p>
|
||||
<!-- Most Common Questions (Inline, Expandable) -->
|
||||
<div class="bg-white rounded-lg shadow-sm p-8 mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6">Most Common Questions</h2>
|
||||
<div id="inline-faq-container" class="space-y-4">
|
||||
<!-- Will be populated by JavaScript -->
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<button id="view-all-questions-btn" class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition inline-flex items-center gap-2 shadow-md">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<span>View All Questions & Search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Still have questions? -->
|
||||
|
|
@ -297,60 +411,251 @@
|
|||
Can't find what you're looking for? We're here to help.
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/media-inquiry.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||||
Contact Us
|
||||
<a href="/case-submission.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5" 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>
|
||||
Submit a Case Study
|
||||
</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">
|
||||
<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">
|
||||
<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>
|
||||
GitHub Discussions
|
||||
</a>
|
||||
<a href="/media-inquiry.html" class="bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition border-2 border-blue-300 inline-flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
Media Inquiry
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
||||
<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-4 gap-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">Safety Through Structure, Not Aspiration</p>
|
||||
<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-bold mb-4">Audience Paths</h3>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/researcher.html" class="hover:text-white transition">Researchers</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-white transition">Implementers</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-white transition">Leaders</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Resources</h3>
|
||||
<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/classification-demo.html" class="hover:text-white transition">Interactive Demos</a></li>
|
||||
<li><a href="/faq.html" class="hover:text-white transition">FAQ</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-bold mb-4">Community</h3>
|
||||
<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">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 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 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 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 overflow-hidden">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Search FAQ</h2>
|
||||
<button id="search-modal-close-btn"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition"
|
||||
aria-label="Close search">
|
||||
<svg class="w-6 h-6" 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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div id="search-modal-content" class="flex-1 overflow-y-auto p-6 min-h-0">
|
||||
<!-- Search Input -->
|
||||
<div class="mb-4">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="faq-search"
|
||||
placeholder="Search FAQ..."
|
||||
class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
||||
aria-label="Search FAQ"
|
||||
/>
|
||||
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Row -->
|
||||
<div class="flex flex-wrap items-center gap-3 mb-4">
|
||||
<!-- Audience Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-audience" class="sr-only">Filter by Audience</label>
|
||||
<select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="all">All Audiences</option>
|
||||
<option value="researcher">Researcher</option>
|
||||
<option value="implementer">Implementer</option>
|
||||
<option value="leader">Leader</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<!-- Search Tips Button -->
|
||||
<button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Summary -->
|
||||
<div id="search-results-summary" class="mb-4 text-sm text-gray-600">
|
||||
<span id="search-results-count"></span>
|
||||
</div>
|
||||
|
||||
<!-- Search Results in Modal -->
|
||||
<div id="search-results-modal" class="mt-6">
|
||||
<div id="faq-container-modal" class="space-y-4">
|
||||
<!-- Results will be populated here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No results message -->
|
||||
<div id="no-results-modal" class="hidden text-center py-12">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-lg font-medium text-gray-900">No questions found</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Try adjusting your search or filter</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Tips Modal -->
|
||||
<div id="search-tips-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-2xl w-full max-h-[80vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Search Tips</h2>
|
||||
<button id="search-tips-close-btn" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition" aria-label="Close search tips">
|
||||
<svg class="w-6 h-6" 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"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="space-y-6">
|
||||
<!-- Basic Search -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Basic Search</h3>
|
||||
<p class="text-gray-600 mb-3">Type keywords in the search box to find relevant questions. The search looks through both questions and answers.</p>
|
||||
<div class="bg-gray-50 p-3 rounded border border-gray-200">
|
||||
<code class="text-sm text-gray-800">Example: "deployment" or "performance overhead"</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Audience Filter</h3>
|
||||
<p class="text-gray-600 mb-3">Filter questions by intended audience:</p>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Researcher:</strong> Academic questions about theory and validation</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Implementer:</strong> Technical implementation and integration questions</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Leader:</strong> Strategic business and organizational questions</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Search Tips -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Search Tips</h3>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Use specific terms for better results</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Filter by audience to narrow results</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Questions are searchable by keywords</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Click any question to expand the full answer</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Keyboard Shortcuts</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
|
||||
<span class="text-gray-600">Close search</span>
|
||||
<kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-sm font-mono">Esc</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Version Management & PWA -->
|
||||
<script src="/js/version-manager.js"></script>
|
||||
|
||||
<script src="/js/faq.js?v=0.1.0.1760254958072"></script>
|
||||
<script src="/js/faq.js?v=1760427000"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -727,38 +727,49 @@ if (pressure.level === 'CRITICAL') {
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12">
|
||||
<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-4 gap-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
|
||||
<h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
|
||||
<p class="text-sm">
|
||||
Preserving human agency through architectural constraints, not aspirational goals.
|
||||
Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-4">Audience Paths</h3>
|
||||
<h3 class="text-white font-semibold mb-4">Resources</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>
|
||||
<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-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="/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>
|
||||
<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>
|
||||
|
|
|
|||
373
public/js/faq.js
373
public/js/faq.js
|
|
@ -2785,6 +2785,260 @@ See [Audit Guide](/downloads/implementation-guide.pdf) Section 9: "Regulatory Co
|
|||
let currentFilter = 'all';
|
||||
let currentSearchQuery = '';
|
||||
|
||||
/**
|
||||
* Open the search modal
|
||||
*/
|
||||
function openSearchModal() {
|
||||
const modal = document.getElementById('search-modal');
|
||||
const searchInput = document.getElementById('faq-search');
|
||||
|
||||
modal.classList.add('show');
|
||||
|
||||
// Focus on search input
|
||||
setTimeout(() => {
|
||||
searchInput.focus();
|
||||
}, 100);
|
||||
|
||||
// Render initial results
|
||||
renderFAQs();
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the search modal
|
||||
*/
|
||||
function closeSearchModal() {
|
||||
const modal = document.getElementById('search-modal');
|
||||
modal.classList.remove('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open search tips modal
|
||||
*/
|
||||
function openSearchTipsModal() {
|
||||
const modal = document.getElementById('search-tips-modal');
|
||||
modal.classList.add('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Close search tips modal
|
||||
*/
|
||||
function closeSearchTipsModal() {
|
||||
const modal = document.getElementById('search-tips-modal');
|
||||
modal.classList.remove('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup modal event listeners
|
||||
*/
|
||||
function setupModalListeners() {
|
||||
// Open search modal button
|
||||
const openBtn = document.getElementById('open-search-modal-btn');
|
||||
if (openBtn) {
|
||||
openBtn.addEventListener('click', openSearchModal);
|
||||
}
|
||||
|
||||
// Featured question buttons
|
||||
const featuredBtns = document.querySelectorAll('.featured-question-btn');
|
||||
featuredBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const searchQuery = btn.dataset.search;
|
||||
openSearchModal();
|
||||
// Set search value after modal opens
|
||||
setTimeout(() => {
|
||||
const searchInput = document.getElementById('faq-search');
|
||||
if (searchInput) {
|
||||
searchInput.value = searchQuery;
|
||||
searchInput.dispatchEvent(new Event('input'));
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
// Close search modal button
|
||||
const closeBtn = document.getElementById('search-modal-close-btn');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closeSearchModal);
|
||||
}
|
||||
|
||||
// Search tips button
|
||||
const tipsBtn = document.getElementById('search-tips-btn');
|
||||
if (tipsBtn) {
|
||||
tipsBtn.addEventListener('click', openSearchTipsModal);
|
||||
}
|
||||
|
||||
// Close search tips button
|
||||
const tipCloseBtn = document.getElementById('search-tips-close-btn');
|
||||
if (tipCloseBtn) {
|
||||
tipCloseBtn.addEventListener('click', closeSearchTipsModal);
|
||||
}
|
||||
|
||||
// Clear filters button
|
||||
const clearBtn = document.getElementById('clear-filters-btn');
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => {
|
||||
currentFilter = 'all';
|
||||
currentSearchQuery = '';
|
||||
document.getElementById('faq-search').value = '';
|
||||
document.getElementById('filter-audience').value = 'all';
|
||||
renderFAQs();
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal on backdrop click
|
||||
const searchModal = document.getElementById('search-modal');
|
||||
if (searchModal) {
|
||||
searchModal.addEventListener('click', (e) => {
|
||||
if (e.target === searchModal) {
|
||||
closeSearchModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const tipsModal = document.getElementById('search-tips-modal');
|
||||
if (tipsModal) {
|
||||
tipsModal.addEventListener('click', (e) => {
|
||||
if (e.target === tipsModal) {
|
||||
closeSearchTipsModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Escape key closes modals
|
||||
if (e.key === 'Escape') {
|
||||
closeSearchModal();
|
||||
closeSearchTipsModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render top FAQs inline on the main page (expandable)
|
||||
*/
|
||||
function renderInlineFAQs() {
|
||||
const container = document.getElementById('inline-faq-container');
|
||||
if (!container) return;
|
||||
|
||||
// Get top 6 most important FAQs (mix of all audiences)
|
||||
const topFAQs = FAQ_DATA.filter(faq => [19, 12, 27, 13, 1, 2].includes(faq.id));
|
||||
|
||||
// Sort by ID to maintain order
|
||||
const sorted = topFAQs.sort((a, b) => a.id - b.id);
|
||||
|
||||
// Render as expandable items
|
||||
container.innerHTML = sorted.map(faq => createInlineFAQItemHTML(faq)).join('');
|
||||
|
||||
// Add click listeners for expand/collapse
|
||||
document.querySelectorAll('.inline-faq-question').forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const item = question.closest('.inline-faq-item');
|
||||
const wasOpen = item.classList.contains('open');
|
||||
|
||||
// Close all other items
|
||||
document.querySelectorAll('.inline-faq-item').forEach(other => {
|
||||
other.classList.remove('open');
|
||||
});
|
||||
|
||||
// Toggle this item (only if it wasn't already open)
|
||||
if (!wasOpen) {
|
||||
item.classList.add('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Apply syntax highlighting to code blocks
|
||||
if (typeof hljs !== 'undefined') {
|
||||
document.querySelectorAll('.inline-faq-answer-content pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
}
|
||||
|
||||
// Enable markdown links
|
||||
document.querySelectorAll('.inline-faq-answer-content a').forEach(link => {
|
||||
link.setAttribute('target', '_blank');
|
||||
link.setAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create HTML for inline FAQ item (expandable on main page)
|
||||
*/
|
||||
function createInlineFAQItemHTML(faq) {
|
||||
const audienceColors = {
|
||||
'researcher': 'border-purple-200 hover:border-purple-300',
|
||||
'implementer': 'border-blue-200 hover:border-blue-300',
|
||||
'leader': 'border-green-200 hover:border-green-300'
|
||||
};
|
||||
|
||||
const primaryAudience = faq.audience[0];
|
||||
const colorClass = audienceColors[primaryAudience] || 'border-gray-200 hover:border-gray-300';
|
||||
|
||||
// Parse markdown answer
|
||||
let answerHtml = faq.answer;
|
||||
if (typeof marked !== 'undefined') {
|
||||
answerHtml = marked.parse(faq.answer);
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="inline-faq-item border-2 ${colorClass} rounded-lg transition">
|
||||
<div class="inline-faq-question p-4 flex items-start justify-between cursor-pointer group">
|
||||
<h3 class="text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition flex-1 pr-4">${escapeHtml(faq.question)}</h3>
|
||||
<svg class="faq-arrow w-6 h-6 text-gray-400 group-hover:text-blue-600 transition flex-shrink-0" 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>
|
||||
<div class="inline-faq-answer">
|
||||
<div class="inline-faq-answer-content p-6 pt-0">
|
||||
${answerHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup category filter button listeners
|
||||
*/
|
||||
function setupCategoryButtons() {
|
||||
const categoryBtns = document.querySelectorAll('.category-filter-btn');
|
||||
|
||||
categoryBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const audience = btn.dataset.audience;
|
||||
// Set filter and clear search
|
||||
currentFilter = audience;
|
||||
currentSearchQuery = '';
|
||||
|
||||
// Open modal (this will call renderFAQs automatically)
|
||||
openSearchModal();
|
||||
|
||||
// Update the filter dropdown to match (UI sync only)
|
||||
setTimeout(() => {
|
||||
const filterSelect = document.getElementById('filter-audience');
|
||||
if (filterSelect) {
|
||||
filterSelect.value = audience;
|
||||
}
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup "View All Questions" button listener
|
||||
*/
|
||||
function setupViewAllButton() {
|
||||
const viewAllBtn = document.getElementById('view-all-questions-btn');
|
||||
|
||||
if (viewAllBtn) {
|
||||
viewAllBtn.addEventListener('click', () => {
|
||||
currentFilter = 'all';
|
||||
currentSearchQuery = '';
|
||||
openSearchModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Configure marked.js for better rendering
|
||||
|
|
@ -2796,18 +3050,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
renderFAQs();
|
||||
// Render top 6 FAQs inline on page load
|
||||
renderInlineFAQs();
|
||||
|
||||
// Setup all event listeners
|
||||
setupModalListeners();
|
||||
setupSearchListener();
|
||||
setupFilterListeners();
|
||||
setupCategoryButtons();
|
||||
setupViewAllButton();
|
||||
});
|
||||
|
||||
/**
|
||||
* Render FAQ items based on current filter and search
|
||||
*/
|
||||
function renderFAQs() {
|
||||
const container = document.getElementById('faq-container');
|
||||
const noResults = document.getElementById('no-results');
|
||||
const resultsCount = document.getElementById('results-count');
|
||||
const container = document.getElementById('faq-container-modal');
|
||||
const noResults = document.getElementById('no-results-modal');
|
||||
const resultsCount = document.getElementById('search-results-count');
|
||||
|
||||
// Filter by audience
|
||||
let filtered = FAQ_DATA;
|
||||
|
|
@ -2833,7 +3093,7 @@ function renderFAQs() {
|
|||
if (filtered.length === 0) {
|
||||
container.classList.add('hidden');
|
||||
noResults.classList.remove('hidden');
|
||||
resultsCount.textContent = '';
|
||||
resultsCount.textContent = 'No questions found';
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -2844,22 +3104,72 @@ function renderFAQs() {
|
|||
const filterText = currentFilter === 'all' ? 'all questions' : `${currentFilter} questions`;
|
||||
resultsCount.textContent = `Showing ${filtered.length} of ${FAQ_DATA.length} ${filterText}`;
|
||||
|
||||
// Render FAQ items
|
||||
console.log(`[FAQ] Rendering ${filtered.length} FAQs in modal (marked available: ${typeof marked !== 'undefined'})`);
|
||||
|
||||
// Render FAQ items (fast, no blocking)
|
||||
container.innerHTML = filtered.map(faq => createFAQItemHTML(faq)).join('');
|
||||
|
||||
// Add click listeners for expand/collapse
|
||||
document.querySelectorAll('.faq-question').forEach(question => {
|
||||
question.addEventListener('click', () => {
|
||||
const item = question.closest('.faq-item');
|
||||
item.classList.toggle('open');
|
||||
});
|
||||
});
|
||||
// Use event delegation for better performance (single listener instead of 31)
|
||||
container.removeEventListener('click', handleFAQClick); // Remove old listener if exists
|
||||
container.addEventListener('click', handleFAQClick);
|
||||
|
||||
// Apply syntax highlighting to code blocks
|
||||
if (typeof hljs !== 'undefined') {
|
||||
document.querySelectorAll('.faq-answer-content pre code').forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
// Defer expensive syntax highlighting to avoid blocking UI
|
||||
requestAnimationFrame(() => {
|
||||
if (typeof hljs !== 'undefined') {
|
||||
const codeBlocks = container.querySelectorAll('.faq-answer-content pre code');
|
||||
// Highlight in small batches to avoid freezing
|
||||
highlightCodeBlocksInBatches(codeBlocks);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Event delegation handler for FAQ clicks (single listener for all FAQs)
|
||||
*/
|
||||
function handleFAQClick(event) {
|
||||
const question = event.target.closest('.faq-question');
|
||||
if (!question) return;
|
||||
|
||||
const item = question.closest('.faq-item');
|
||||
if (item) {
|
||||
item.classList.toggle('open');
|
||||
|
||||
// Lazy-load syntax highlighting only when FAQ is opened for first time
|
||||
if (item.classList.contains('open') && !item.dataset.highlighted) {
|
||||
const codeBlocks = item.querySelectorAll('.faq-answer-content pre code');
|
||||
if (codeBlocks.length > 0 && typeof hljs !== 'undefined') {
|
||||
codeBlocks.forEach(block => hljs.highlightElement(block));
|
||||
item.dataset.highlighted = 'true';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight code blocks in batches to avoid UI freeze
|
||||
*/
|
||||
function highlightCodeBlocksInBatches(codeBlocks, batchSize = 5) {
|
||||
const blocks = Array.from(codeBlocks);
|
||||
let index = 0;
|
||||
|
||||
function processBatch() {
|
||||
const batch = blocks.slice(index, index + batchSize);
|
||||
batch.forEach(block => {
|
||||
if (typeof hljs !== 'undefined') {
|
||||
hljs.highlightElement(block);
|
||||
}
|
||||
});
|
||||
|
||||
index += batchSize;
|
||||
|
||||
if (index < blocks.length) {
|
||||
// Schedule next batch
|
||||
requestAnimationFrame(processBatch);
|
||||
}
|
||||
}
|
||||
|
||||
if (blocks.length > 0) {
|
||||
processBatch();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2872,7 +3182,17 @@ function createFAQItemHTML(faq) {
|
|||
// Parse markdown to HTML
|
||||
let answerHTML = faq.answer;
|
||||
if (typeof marked !== 'undefined') {
|
||||
answerHTML = marked.parse(faq.answer);
|
||||
try {
|
||||
answerHTML = marked.parse(faq.answer);
|
||||
} catch (error) {
|
||||
console.error('[FAQ] Markdown parsing failed for FAQ', faq.id, error);
|
||||
// Fallback to plain text with line breaks
|
||||
answerHTML = `<p>${faq.answer.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</p>`;
|
||||
}
|
||||
} else {
|
||||
console.warn('[FAQ] marked.js not loaded - using plain text');
|
||||
// Fallback to plain text with line breaks
|
||||
answerHTML = `<p>${faq.answer.replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>')}</p>`;
|
||||
}
|
||||
|
||||
// Highlight search query in rendered HTML (if searching)
|
||||
|
|
@ -2952,20 +3272,15 @@ function setupSearchListener() {
|
|||
}
|
||||
|
||||
/**
|
||||
* Setup filter pill listeners
|
||||
* Setup filter dropdown listener
|
||||
*/
|
||||
function setupFilterListeners() {
|
||||
const pills = document.querySelectorAll('.filter-pill');
|
||||
const audienceFilter = document.getElementById('filter-audience');
|
||||
|
||||
pills.forEach(pill => {
|
||||
pill.addEventListener('click', (e) => {
|
||||
// Update active state
|
||||
pills.forEach(p => p.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
|
||||
// Update filter
|
||||
currentFilter = e.target.dataset.filter;
|
||||
if (audienceFilter) {
|
||||
audienceFilter.addEventListener('change', (e) => {
|
||||
currentFilter = e.target.value;
|
||||
renderFAQs();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -562,33 +562,53 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
||||
<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-3 gap-8 text-sm">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-gray-200 font-semibold mb-3">Tractatus Framework</h3>
|
||||
<p class="text-gray-500">
|
||||
Research framework for structural AI governance. Apache 2.0 licence.
|
||||
<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-gray-200 font-semibold mb-3">Documentation</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/docs.html" class="hover:text-amber-400">Technical Specifications</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-amber-400">Implementation</a></li>
|
||||
<li><a href="/researcher.html" class="hover:text-amber-400">Research</a></li>
|
||||
<li><a href="/about.html" class="hover:text-amber-400">About</a></li>
|
||||
<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-gray-200 font-semibold mb-3">Status</h3>
|
||||
<p class="text-gray-500">
|
||||
Early development, research validation phase. Open for organisational pilots and independent evaluation.
|
||||
<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="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-600">
|
||||
<p>Tractatus AI Safety Framework — Research Project</p>
|
||||
<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 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 License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -168,30 +168,49 @@
|
|||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-300 mt-16 py-12">
|
||||
<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-3 gap-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">
|
||||
AI safety through architectural constraints and human agency preservation.
|
||||
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">Quick Links</h3>
|
||||
<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="/about.html" class="hover:text-white transition">About</a></li>
|
||||
<li><a href="/about/values.html" class="hover:text-white transition">Values</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">Contact</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -465,33 +465,54 @@
|
|||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-400 py-12 mt-16">
|
||||
<!-- 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-3 gap-8 text-sm">
|
||||
<div class="grid grid-cols-1 md:grid-cols-5 gap-8">
|
||||
<div>
|
||||
<h3 class="text-gray-200 font-semibold mb-3">Tractatus Framework</h3>
|
||||
<p class="text-gray-500">
|
||||
Research framework exploring architectural approaches to AI governance. Apache 2.0 licence.
|
||||
<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-gray-200 font-semibold mb-3">Documentation</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/docs.html" class="hover:text-amber-400">Technical Specifications</a></li>
|
||||
<li><a href="/implementer.html" class="hover:text-amber-400">Implementation</a></li>
|
||||
<li><a href="/leader.html" class="hover:text-amber-400">For Leaders</a></li>
|
||||
<li><a href="/about.html" class="hover:text-amber-400">About</a></li>
|
||||
<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-gray-200 font-semibold mb-3">Research Status</h3>
|
||||
<p class="text-gray-500">
|
||||
Early-stage exploratory research. Observations from single-project context. Independent validation needed.
|
||||
<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="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-600">
|
||||
<p>Tractatus AI Safety Framework — Research Project</p>
|
||||
<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 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 License 2.0</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* - PWA functionality
|
||||
*/
|
||||
|
||||
const CACHE_VERSION = '1.0.0';
|
||||
const CACHE_VERSION = '1.0.4';
|
||||
const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
|
||||
const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
{
|
||||
"version": "1.0.0",
|
||||
"buildDate": "2025-10-14T10:30:00Z",
|
||||
"version": "1.0.4",
|
||||
"buildDate": "2025-10-14T13:00:00Z",
|
||||
"changelog": [
|
||||
"Landing page accuracy improvements",
|
||||
"FAQ enhanced for Leader audience",
|
||||
"Removed overstated claims"
|
||||
"Fixed modal scrolling - changed to h-[85vh] with min-h-0 for proper flex scroll",
|
||||
"Removed Quick Actions section from FAQ page",
|
||||
"Standardized footer across all pages with newsletter link",
|
||||
"Enhanced markdown parsing with error handling"
|
||||
],
|
||||
"forceUpdate": false,
|
||||
"minVersion": "1.0.0"
|
||||
"forceUpdate": true,
|
||||
"minVersion": "1.0.4"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue