<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Enhancement Test</title>
<link rel="stylesheet" href="assets/css/design-system.css">
<link rel="stylesheet" href="assets/css/adr.css">
<style>
body {
padding: 2rem;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
}
.test-section {
margin: 2rem 0;
padding: 1rem;
background: var(--bg-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-surface1);
}
.search-container {
margin-bottom: 2rem;
padding: 1rem;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.feature-card {
padding: 1rem;
background: var(--bg-tertiary);
border-radius: var(--radius-md);
border: 1px solid var(--color-surface1);
}
</style>
</head>
<body>
<header>
<h1>Search Enhancement Test Page</h1>
<p>This page tests all the implemented search enhancement features</p>
</header>
<div class="search-container">
<h2>Enhanced Search</h2>
<div class="adr-search">
<input type="search" id="adr-search" placeholder="Search for content..." />
</div>
<p><em>Try searching for: "test", "feature", "search", "enhancement"</em></p>
<div class="test-instructions">
<h3>Test Instructions:</h3>
<ul>
<li><strong>Highlighting:</strong> Type in search box to see yellow highlights</li>
<li><strong>Navigation:</strong> Use ↑/↓ arrow keys to navigate results</li>
<li><strong>Current Result:</strong> Current result shows in blue with outline</li>
<li><strong>Result Counter:</strong> See "X/Y" counter next to search box</li>
<li><strong>Clear Button:</strong> Click × button to clear search</li>
<li><strong>URL Persistence:</strong> Search terms are saved in URL</li>
<li><strong>Keyboard Shortcuts:</strong>
<ul>
<li>Ctrl/Cmd + F: Focus search</li>
<li>F3 / Ctrl+G: Next result</li>
<li>Shift + F3 / Shift+Ctrl+G: Previous result</li>
<li>Escape: Clear search</li>
<li>Enter: Jump to current result</li>
</ul>
</li>
</ul>
</div>
</div>
<main>
<section class="test-section">
<h2>Test Content for Search Feature</h2>
<p>This is a test paragraph containing various words that can be searched for.
The search enhancement feature should highlight matching terms in yellow.</p>
<h3>Search Feature Benefits</h3>
<div class="feature-list">
<div class="feature-card">
<h4>Performance Optimized</h4>
<p>Uses requestAnimationFrame for smooth performance during search operations.</p>
</div>
<div class="feature-card">
<h4>Accessibility First</h4>
<p>Full keyboard navigation, screen reader support, and ARIA live regions.</p>
</div>
<div class="feature-card">
<h4>URL Integration</h4>
<p>Search terms persist in URL parameters for sharing and bookmarking.</p>
</div>
<div class="feature-card">
<h4>Visual Enhancement</h4>
<p>Yellow highlighting for matches, blue for current result, smooth animations.</p>
</div>
</div>
</section>
<section class="test-section">
<h2>More Test Content</h2>
<p>Additional content to test the search functionality. This section contains
multiple paragraphs and various text elements that should be searchable.</p>
<blockquote>
<p>This is a blockquote that should also be searchable by the enhanced search feature.</p>
</blockquote>
<ul>
<li>First list item with searchable test content</li>
<li>Second item containing more test text</li>
<li>Third item for comprehensive testing</li>
</ul>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Search Highlighting</td>
<td>✅ Implemented</td>
<td>Highlights matching terms in yellow</td>
</tr>
<tr>
<td>Keyboard Navigation</td>
<td>✅ Implemented</td>
<td>Arrow keys navigate between results</td>
</tr>
<tr>
<td>Result Counter</td>
<td>✅ Implemented</td>
<td>Shows current position and total count</td>
</tr>
</tbody>
</table>
</section>
<section class="test-section">
<h2>ADR-Style Content</h2>
<div class="adr-title">
<a href="#">Test Architecture Decision Record</a>
</div>
<div class="adr-excerpt">
This is an excerpt of an ADR that should be searchable using the enhanced search feature.
It contains relevant keywords and test content for comprehensive testing.
</div>
<div class="adr-status status-accepted">Accepted</div>
</section>
</main>
<script src="assets/js/caxton.js"></script>
<script src="assets/js/search-integration.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('Search Enhancement Test Page Loaded');
setTimeout(function() {
if (window.CaxtonSearch) {
console.log('✅ CaxtonSearch API is available');
console.log('Available methods:', Object.keys(window.CaxtonSearch));
} else {
console.log('❌ CaxtonSearch API not found');
}
}, 500);
});
</script>
</body>
</html>