<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Architecture Diagram</title>
<!-- Tailwind CSS for styling -->
https://cdn.tailwindcss.com
<!-- Google Fonts: Montserrat -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
html, body {
font-family: 'Montserrat', sans-serif;
background-color: #ADD8E6;
margin: 0;
padding: 1rem;
box-sizing: border-box;
}
body {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.page-wrap {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
/* Custom Blue Colors for ADA Compliance */
.bg-blue-dark { background-color: #001F3F; } /* Navy - Contrast ratio 16:1 against white */
.bg-blue-light { background-color: #003366; } /* Dark Blue - Contrast ratio 11.2:1 against white */
.text-blue-highlight { color: #81D4FA; } /* Light Blue - Contrast ratio 8.7:1 against Navy */
.icon-bg { background-color: #001122; }
/* The decorative broken ring around the chevrons */
.icon-ring {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid white;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
/* Clickable panel affordance */
.panel-trigger {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.panel-trigger:hover {
transform: translateY(-2px);
filter: brightness(1.15);
}
.panel-trigger:focus-visible {
outline: 3px solid #81D4FA;
outline-offset: -3px;
}
.click-hint {
display: block;
text-align: center;
font-size: 0.7rem;
letter-spacing: 0.05em;
color: #001F3F;
opacity: 0.65;
margin-top: 0.4rem;
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 8, 20, 0.72);
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 50;
}
.modal-overlay.open {
display: flex;
}
.modal-box {
background: #ffffff;
max-width: 32rem;
width: 100%;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.96) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
background-color: #001F3F;
color: #81D4FA;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-close {
background: none;
border: none;
color: #81D4FA;
font-size: 1.25rem;
cursor: pointer;
line-height: 1;
padding: 0.25rem;
}
.modal-close:hover { color: #ffffff; }
.modal-body {
padding: 1.5rem;
color: #1f2937;
font-size: 0.95rem;
line-height: 1.6;
}
.modal-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
color: #003366;
font-weight: 700;
text-decoration: none;
}
.modal-link:hover { text-decoration: underline; }
</style>
</head>
<body>
<!-- Outer wrapper: 3-column grid + Hybrid box stacked vertically -->
<div class="page-wrap flex flex-col gap-4">
<!-- Main Container: 3 Columns -->
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-4 shadow-2xl bg-[#003366]/10 p-4 rounded-xl">
<!-- COLUMN 1: Lexical Search -->
<div class="relative flex flex-col h-full min-h-[260px] panel-trigger" tabindex="0" role="button"
aria-haspopup="dialog"
data-title="Lexical Search"
data-body="Placeholder: describe how lexical search matches exact terms using field search, thesaurus browsing, syntax and operators, and filters across pre-indexed databases. Replace this text with your final copy."
data-link="#">
<!-- Top Box -->
<div class="bg-blue-dark pt-5 px-5 pb-8 flex-1 flex items-center justify-center">
<h2 class="text-blue-highlight font-bold text-2xl text-center leading-tight">
Lexical<br>Search
</h2>
</div>
<!-- Seam / Chevron Divider -->
<div class="relative h-0 z-10">
<div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 w-11 h-11 icon-bg rounded-full flex items-center justify-center shadow-lg">
<div class="icon-ring"></div>
<i class="fa-solid fa-chevron-down text-blue-highlight text-base relative z-10"></i>
</div>
</div>
<!-- Bottom Box -->
<div class="bg-blue-light pt-8 px-5 pb-5 flex-1 flex items-center justify-center">
<p class="text-white text-center font-normal leading-relaxed text-sm">
Field Search, Thesaurus<br>
Browsing, Syntax and<br>
Operators, Filters, Pre-indexed<br>
Databases
</p>
</div>
<span class="click-hint">Click for more</span>
</div>
<!-- COLUMN 2: Semantic Search (Colors inverted) -->
<div class="relative flex flex-col h-full min-h-[260px] panel-trigger" tabindex="0" role="button"
aria-haspopup="dialog"
data-title="Semantic Search"
data-body="Placeholder: describe how semantic search uses Natural Language Understanding (NLU) to interpret query meaning, context, and content rather than exact keywords. Replace this text with your final copy."
data-link="#">
<!-- Top Box -->
<div class="bg-blue-light pt-5 px-5 pb-8 flex-1 flex items-center justify-center">
<p class="text-white text-center font-normal leading-relaxed text-sm">
Natural Language<br>
Understanding (NLU). Query<br>
meaning, context, and<br>
content.
</p>
</div>
<!-- Seam / Chevron Divider (Pointing Up) -->
<div class="relative h-0 z-10">
<div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 w-11 h-11 icon-bg rounded-full flex items-center justify-center shadow-lg">
<div class="icon-ring" style="transform: rotate(-135deg);"></div>
<i class="fa-solid fa-chevron-up text-blue-highlight text-base relative z-10"></i>
</div>
</div>
<!-- Bottom Box -->
<div class="bg-blue-dark pt-8 px-5 pb-5 flex-1 flex items-center justify-center">
<h2 class="text-blue-highlight font-bold text-2xl text-center leading-tight">
Semantic<br>
<span class="text-sm">...</span><br>
search
</h2>
</div>
<span class="click-hint">Click for more</span>
</div>
<!-- COLUMN 3: Neural Search -->
<div class="relative flex flex-col h-full min-h-[260px] panel-trigger" tabindex="0" role="button"
aria-haspopup="dialog"
data-title="Neural Search"
data-body="Placeholder: describe how neural search harnesses an LLM to generate a response, producing a summary with sources rather than a plain results list. Replace this text with your final copy."
data-link="#">
<!-- Top Box -->
<div class="bg-blue-dark pt-5 px-5 pb-8 flex-1 flex items-center justify-center">
<h2 class="text-blue-highlight font-bold text-2xl text-center leading-tight">
Neural<br>Search
</h2>
</div>
<!-- Seam / Chevron Divider -->
<div class="relative h-0 z-10">
<div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 w-11 h-11 icon-bg rounded-full flex items-center justify-center shadow-lg">
<div class="icon-ring"></div>
<i class="fa-solid fa-chevron-down text-blue-highlight text-base relative z-10"></i>
</div>
</div>
<!-- Bottom Box -->
<div class="bg-blue-light pt-8 px-5 pb-5 flex-1 flex items-center justify-center">
<p class="text-white text-center font-normal leading-relaxed text-sm">
Power of LLM generating the<br>
response, a summary with<br>
sources.
</p>
</div>
<span class="click-hint">Click for more</span>
</div>
</div>
<!-- HYBRID BOX: full-width box beneath the three columns -->
<div class="relative w-full shadow-2xl bg-blue-dark p-6 rounded-xl flex items-center justify-center panel-trigger"
tabindex="0" role="button" aria-haspopup="dialog"
data-title="Hybrid"
data-body="Placeholder: describe how hybrid search combines lexical, semantic, and neural techniques to balance precision with contextual understanding. Replace this text with your final copy."
data-link="#">
<h2 class="text-blue-highlight font-bold text-2xl text-center leading-tight">
Hybrid
</h2>
<span class="click-hint">Click for more</span>
</div>
</div>
<!-- Modal (single reusable popup) -->
<div id="modalOverlay" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="modal-box">
<div class="modal-header">
<h3 id="modalTitle" class="text-xl font-bold">Title</h3>
<button class="modal-close" id="modalClose" aria-label="Close">×</button>
</div>
<div class="modal-body">
<p id="modalBody">Body text</p>
<a id="modalLink" class="modal-link" href="#" target="_blank" rel="noopener">
Learn more <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
</a>
</div>
</div>
</div>
<script>
(function () {
const overlay = document.getElementById('modalOverlay');
const titleEl = document.getElementById('modalTitle');
const bodyEl = document.getElementById('modalBody');
const linkEl = document.getElementById('modalLink');
const closeBtn = document.getElementById('modalClose');
let lastFocused = null;
function openModal(trigger) {
titleEl.textContent = trigger.dataset.title || '';
bodyEl.textContent = trigger.dataset.body || '';
const link = trigger.dataset.link || '#';
linkEl.href = link;
linkEl.style.display = link && link !== '#' ? 'inline-flex' : 'none';
lastFocused = document.activeElement;
overlay.classList.add('open');
closeBtn.focus();
}
function closeModal() {
overlay.classList.remove('open');
if (lastFocused) lastFocused.focus();
}
document.querySelectorAll('.panel-trigger').forEach(function (el) {
el.addEventListener('click', function () { openModal(el); });
el.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openModal(el);
}
});
});
closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', function (e) {
if (e.target === overlay) closeModal();
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal();
});
})();
</script>
</body>
</html>
Review 4 Research 