645 lines
29 KiB
HTML
645 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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-new.svg">
|
|
|
|
<!-- PWA Manifest -->
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#3b82f6">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<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-new.svg">
|
|
|
|
<link rel="stylesheet" href="/css/fonts.css?v=0.1.0.1761338266531">
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761338266531">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761338266531">
|
|
|
|
<!-- 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?v=0.1.0.1761338266531">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js?v=0.1.0.1761338266531"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js?v=0.1.0.1761338266531"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js?v=0.1.0.1761338266531"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js?v=0.1.0.1761338266531"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js?v=0.1.0.1761338266531"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<!-- Markdown parser -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.0.0/marked.min.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<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; }
|
|
|
|
/* Accessibility: Focus indicators */
|
|
a:focus, button:focus, input:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
a:focus:not(:focus-visible) { outline: none; }
|
|
a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
|
|
|
|
/* FAQ expandable sections (modal) */
|
|
.faq-item { transition: all 0.2s ease; }
|
|
.faq-question { cursor: pointer; user-select: none; }
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
.faq-item.open .faq-answer { max-height: none; }
|
|
.faq-arrow {
|
|
transition: transform 0.2s ease;
|
|
display: inline-block;
|
|
}
|
|
.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; }
|
|
|
|
/* Audience filter pills */
|
|
.filter-pill {
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
.filter-pill.active {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
}
|
|
|
|
/* FAQ Answer Prose Styling */
|
|
.faq-answer-content {
|
|
line-height: 1.75;
|
|
color: #374151;
|
|
}
|
|
|
|
.faq-answer-content h1, .faq-answer-content h2, .faq-answer-content h3 {
|
|
font-weight: 700;
|
|
color: #111827;
|
|
margin-top: 2em;
|
|
margin-bottom: 1em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.faq-answer-content h1 { font-size: 1.875rem; }
|
|
.faq-answer-content h2 { font-size: 1.5rem; }
|
|
.faq-answer-content h3 { font-size: 1.25rem; }
|
|
|
|
.faq-answer-content p {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
|
|
.faq-answer-content strong {
|
|
font-weight: 700;
|
|
color: #111827;
|
|
}
|
|
|
|
.faq-answer-content ul, .faq-answer-content ol {
|
|
margin: 1.25em 0;
|
|
padding-left: 1.75em;
|
|
list-style-position: outside;
|
|
}
|
|
|
|
.faq-answer-content ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.faq-answer-content ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.faq-answer-content li {
|
|
margin-bottom: 0.5em;
|
|
padding-left: 0.375em;
|
|
}
|
|
|
|
.faq-answer-content li::marker {
|
|
color: #3b82f6;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.faq-answer-content a {
|
|
color: #2563eb;
|
|
text-decoration: underline;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.faq-answer-content a:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.faq-answer-content blockquote {
|
|
border-left: 4px solid #3b82f6;
|
|
padding-left: 1rem;
|
|
margin: 1.5em 0;
|
|
font-style: italic;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Emoji support */
|
|
.faq-answer-content li::before {
|
|
content: none;
|
|
}
|
|
|
|
/* Section dividers */
|
|
.faq-answer-content hr {
|
|
margin: 2.5em 0;
|
|
border: 0;
|
|
border-top: 2px solid #e5e7eb;
|
|
}
|
|
|
|
/* Checkmarks and emojis in lists */
|
|
.faq-answer-content li:has(> :first-child:is(span):first-letter) {
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Force visible scrollbar on modal (cross-browser) */
|
|
.modal-scrollable {
|
|
max-height: 60vh;
|
|
overflow-y: scroll !important;
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: #9ca3af #f3f4f6; /* Firefox: thumb track */
|
|
}
|
|
|
|
/* Webkit browsers (Chrome, Safari, Edge) */
|
|
.modal-scrollable::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.modal-scrollable::-webkit-scrollbar-thumb {
|
|
background-color: #9ca3af;
|
|
border-radius: 5px;
|
|
border: 2px solid #f3f4f6;
|
|
}
|
|
|
|
.modal-scrollable::-webkit-scrollbar-thumb:hover {
|
|
background-color: #6b7280;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Skip Link -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Navigation -->
|
|
<script src="/js/components/navbar.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<!-- Hero -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-16">
|
|
<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" data-i18n="header.title">Frequently Asked Questions</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8" data-i18n="header.subtitle">
|
|
Common questions about Tractatus framework implementation, performance, and architecture
|
|
</p>
|
|
<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>
|
|
<span data-i18n="header.search_btn">Search FAQ</span>
|
|
</button>
|
|
</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">
|
|
|
|
<!-- 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" data-i18n="browse_by_audience.heading">Browse by Audience</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<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" data-i18n="browse_by_audience.researcher_title">Researchers</h3>
|
|
<p class="text-sm text-gray-600 mt-1" data-i18n="browse_by_audience.researcher_desc">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" data-i18n="browse_by_audience.implementer_title">Implementers</h3>
|
|
<p class="text-sm text-gray-600 mt-1" data-i18n="browse_by_audience.implementer_desc">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" data-i18n="browse_by_audience.leader_title">Leaders</h3>
|
|
<p class="text-sm text-gray-600 mt-1" data-i18n="browse_by_audience.leader_desc">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" data-i18n="browse_by_audience.note">Click any category to see filtered questions in advanced search</p>
|
|
</div>
|
|
|
|
<!-- Featured 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" data-i18n="featured_questions.heading">Featured 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 data-i18n="featured_questions.view_all_btn">View All Questions & Search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Still have questions? -->
|
|
<div class="mt-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl p-8 text-center text-white">
|
|
<h2 class="text-2xl font-bold mb-3" data-i18n="still_have_questions.title">Still Have Questions?</h2>
|
|
<p class="text-lg mb-6 opacity-90" data-i18n="still_have_questions.description">
|
|
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="/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>
|
|
<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">
|
|
<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>
|
|
<span data-i18n="still_have_questions.github_discussions_btn">GitHub Discussions</span>
|
|
</a>
|
|
<a href="/media-inquiry.html" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition border-2 border-blue-400 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>
|
|
<span data-i18n="still_have_questions.media_inquiry_btn">Media Inquiry</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- 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">
|
|
<!-- 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" data-i18n="search_modal.title">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>
|
|
|
|
<!-- Search and Filter Controls (Fixed) -->
|
|
<div class="flex-shrink-0 p-6 border-b border-gray-200">
|
|
<!-- Search Input -->
|
|
<div class="mb-4">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="faq-search"
|
|
data-i18n-placeholder="search_modal.search_placeholder"
|
|
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" data-i18n="search_modal.filter_audience_label">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" data-i18n="search_modal.all_audiences">All Audiences</option>
|
|
<option value="researcher" data-i18n="search_modal.researcher">Researcher</option>
|
|
<option value="implementer" data-i18n="search_modal.implementer">Implementer</option>
|
|
<option value="leader" data-i18n="search_modal.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" data-i18n="search_modal.clear_filters_btn">
|
|
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="text-sm text-gray-600">
|
|
<span id="search-results-count"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ List (Scrollable) -->
|
|
<div class="modal-scrollable p-6">
|
|
<div id="faq-container-modal" class="space-y-4">
|
|
<!-- Results will be populated here by JavaScript -->
|
|
</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" data-i18n="search_modal.no_results_title">No questions found</h3>
|
|
<p class="mt-1 text-sm text-gray-500" data-i18n="search_modal.no_results_desc">Try adjusting your search or filter</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- Close modal container -->
|
|
</div><!-- Close modal backdrop -->
|
|
|
|
<!-- 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" data-i18n="search_tips.title">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" data-i18n="search_tips.basic_search_title">Basic Search</h3>
|
|
<p class="text-gray-600 mb-3" data-i18n="search_tips.basic_search_desc">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" data-i18n="search_tips.basic_search_example">Example: "deployment" or "performance overhead"</code>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="search_tips.audience_filter_title">Audience Filter</h3>
|
|
<p class="text-gray-600 mb-3" data-i18n="search_tips.audience_filter_desc">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> <span data-i18n="search_tips.researcher_filter_desc">Academic questions about theory and validation</span></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="font-medium text-blue-600 mr-2">•</span>
|
|
<span><strong>Implementer:</strong> <span data-i18n="search_tips.implementer_filter_desc">Technical implementation and integration questions</span></span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="font-medium text-blue-600 mr-2">•</span>
|
|
<span><strong>Leader:</strong> <span data-i18n="search_tips.leader_filter_desc">Strategic business and organizational questions</span></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Search Tips -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2" data-i18n="search_tips.tips_title">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 data-i18n="search_tips.tip_1">Use specific terms for better results</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="font-medium text-green-600 mr-2">✓</span>
|
|
<span data-i18n="search_tips.tip_2">Filter by audience to narrow results</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="font-medium text-green-600 mr-2">✓</span>
|
|
<span data-i18n="search_tips.tip_3">Questions are searchable by keywords</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="font-medium text-green-600 mr-2">✓</span>
|
|
<span data-i18n="search_tips.tip_4">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" data-i18n="search_tips.keyboard_shortcuts_title">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" data-i18n="search_tips.close_search">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>
|
|
|
|
<!-- Internationalization -->
|
|
<script src="/js/i18n-simple.js?v=0.1.0.1761338266531"></script>
|
|
<script src="/js/components/language-selector.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<!-- Version Management & PWA -->
|
|
<script src="/js/version-manager.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<script src="/js/faq.js?v=0.1.0.1761338266531"></script>
|
|
|
|
<!-- Footer Component -->
|
|
<script src="/js/components/footer.js?v=0.1.0.1761338266531"></script>
|
|
|
|
</body>
|
|
</html>
|