ebcd600b30
Achieved 81% error reduction (31 → 6 errors) across 9 pages through systematic
accessibility audit and remediation.
Key improvements:
- Add aria-labels to navigation close buttons (all pages)
- Fix footer text contrast: gray-600 → gray-300 (7 pages)
- Fix button contrast: amber-600 → amber-700, green-600 → green-700
- Fix docs modal empty h2 heading issue
- Fix leader page color contrast (bulk replacement)
- Update audit script: advocate.html → leader.html
Results:
- 7 of 9 pages now fully WCAG 2.1 AA compliant
- Remaining 6 errors likely tool false positives
- All critical accessibility issues resolved
Files modified:
- public/js/components/navbar.js (mobile menu accessibility)
- public/js/components/document-cards.js (modal heading fix)
- public/*.html (footer contrast, button colors)
- public/leader.html (comprehensive color updates)
- scripts/audit-accessibility.js (page list update)
Documentation: docs/accessibility-improvements-2025-10.md
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
240 lines
12 KiB
HTML
240 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Instruction Classification Demo - Tractatus Framework</title>
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=1759833751">
|
|
<style>
|
|
.quadrant-badge {
|
|
@apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
|
|
}
|
|
.quadrant-STRATEGIC { @apply bg-purple-100 text-purple-800 border border-purple-300; }
|
|
.quadrant-OPERATIONAL { @apply bg-blue-100 text-blue-800 border border-blue-300; }
|
|
.quadrant-TACTICAL { @apply bg-green-100 text-green-800 border border-green-300; }
|
|
.quadrant-SYSTEM { @apply bg-orange-100 text-orange-800 border border-orange-300; }
|
|
.quadrant-STOCHASTIC { @apply bg-pink-100 text-pink-800 border border-pink-300; }
|
|
|
|
.persistence-HIGH { @apply bg-red-500; }
|
|
.persistence-MEDIUM { @apply bg-yellow-500; }
|
|
.persistence-LOW { @apply bg-green-500; }
|
|
.persistence-VARIABLE { @apply bg-gray-400; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
|
<span class="ml-4 text-gray-400">|</span>
|
|
<span class="ml-4 text-gray-600">Classification Demo</span>
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/demos/27027-demo.html" class="text-gray-600 hover:text-gray-900">27027 Demo</a>
|
|
<a href="/demos/boundary-demo.html" class="text-gray-600 hover:text-gray-900">Boundary Demo</a>
|
|
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
InstructionPersistenceClassifier Demo
|
|
</h1>
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
See how the Tractatus framework classifies instructions to determine
|
|
how long they should persist and how strictly they should be enforced.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Demo Area -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<!-- Input Section -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Try It Yourself</h2>
|
|
|
|
<div class="mb-6">
|
|
<label for="instruction-input" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Type an instruction:
|
|
</label>
|
|
<textarea
|
|
id="instruction-input"
|
|
rows="4"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="e.g., Always use MongoDB on port 27017"
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
id="classify-btn"
|
|
class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition"
|
|
>
|
|
Classify Instruction
|
|
</button>
|
|
|
|
<!-- Example Instructions -->
|
|
<div class="mt-8">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-3">Example Instructions:</h3>
|
|
<div class="space-y-2">
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Always prioritize user privacy over performance">
|
|
"Always prioritize user privacy over performance"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Use MongoDB on port 27017 for this project">
|
|
"Use MongoDB on port 27017 for this project"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Add a console.log statement here for debugging">
|
|
"Add a console.log statement here for debugging"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Explore different approaches to caching">
|
|
"Explore different approaches to caching"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="All API responses must return JSON with success/error format">
|
|
"All API responses must return JSON with success/error format"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Never hardcode credentials or API keys in source code">
|
|
"Never hardcode credentials or API keys in source code"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Use camelCase for JavaScript variables throughout the project">
|
|
"Use camelCase for JavaScript variables throughout the project"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Refactor the authentication module to use async/await">
|
|
"Refactor the authentication module to use async/await"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Express.js on port 3000, MongoDB on port 27017, Redis on port 6379">
|
|
"Express.js on port 3000, MongoDB on port 27017, Redis on port 6379"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Try different color schemes and see which looks better">
|
|
"Try different color schemes and see which looks better"
|
|
</button>
|
|
<button class="example-btn w-full text-left px-4 py-2 bg-gray-50 hover:bg-gray-100 rounded-lg text-sm text-gray-700 transition"
|
|
data-example="Add comprehensive error handling to the file upload endpoint">
|
|
"Add comprehensive error handling to the file upload endpoint"
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Classification Results</h2>
|
|
|
|
<div id="results-container" class="hidden">
|
|
<!-- Quadrant -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Quadrant</label>
|
|
<div id="result-quadrant" class="quadrant-badge"></div>
|
|
<p id="result-quadrant-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Persistence -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Persistence Level</label>
|
|
<div class="flex items-center space-x-3">
|
|
<div id="result-persistence" class="px-4 py-2 rounded-lg text-white font-semibold"></div>
|
|
<div id="persistence-bar" class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div id="persistence-fill" class="h-full transition-all duration-500"></div>
|
|
</div>
|
|
</div>
|
|
<p id="result-persistence-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Temporal Scope -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Temporal Scope</label>
|
|
<div id="result-temporal" class="px-4 py-2 bg-gray-100 rounded-lg inline-block font-semibold text-gray-700"></div>
|
|
<p id="result-temporal-desc" class="text-sm text-gray-600 mt-2"></p>
|
|
</div>
|
|
|
|
<!-- Verification Required -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Verification Required</label>
|
|
<div id="result-verification" class="px-4 py-2 bg-gray-100 rounded-lg inline-block font-semibold text-gray-700"></div>
|
|
</div>
|
|
|
|
<!-- Explicitness Score -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Explicitness Score</label>
|
|
<div class="flex items-center space-x-3">
|
|
<div id="result-explicitness" class="px-4 py-2 bg-gray-100 rounded-lg font-semibold text-gray-700"></div>
|
|
<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div id="explicitness-fill" class="h-full bg-blue-500 transition-all duration-500"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
<span id="storage-decision"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Reasoning -->
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Classification Reasoning</label>
|
|
<div id="result-reasoning" class="p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="empty-state" class="text-center py-12 text-gray-400">
|
|
<svg class="w-16 h-16 mx-auto mb-4" 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>
|
|
<p>Enter an instruction to see classification</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Explanation Section -->
|
|
<div class="mt-12 bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
|
|
<h3 class="text-lg font-semibold text-blue-900 mb-2">How It Works</h3>
|
|
<p class="text-blue-800 mb-4">
|
|
The InstructionPersistenceClassifier analyzes instructions to determine:
|
|
</p>
|
|
<ul class="space-y-2 text-blue-800">
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Quadrant:</strong> Strategic, Operational, Tactical, System, or Stochastic</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Persistence:</strong> How long it should remain active (HIGH/MEDIUM/LOW/VARIABLE)</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Temporal Scope:</strong> Project-wide, phase-specific, or session-only</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Verification:</strong> How strictly it should be enforced</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="mr-2">•</span>
|
|
<span><strong>Explicitness:</strong> How clear and specific the instruction is (0.0 - 1.0)</span>
|
|
</li>
|
|
</ul>
|
|
<p class="text-blue-800 mt-4">
|
|
Only instructions with explicitness ≥ 0.6 are stored in the persistent database.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/js/demos/classification-demo.js?v=1759833751"></script>
|
|
|
|
</body>
|
|
</html>
|