Further improve, remove the black vault and anomaly research api stuff, but add in an advanced smart algorithm that'll sort out the top secret, confidential, etc tags and list them out accordingly with a more robust interface.

```
<html><head><base href="https://example.com/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classified Archives Search Engine</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
    <style>
    /* Enhanced precision-focused styling */
    :root {
        --primary: #00ff9d;
        --secondary: #004d2e;
        --dark: #001a0f;
        --light: #e6fff5;
        --accent: #ff004d;
        --error: #ff3333;
        --warning: #ffcc00;
        --success: #00cc66;
        --max-width: 800px;
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Courier New', monospace;
    }
    
    body {
        background: var(--dark);
        color: var(--light);
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    #particles-js {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .container {
        position: relative;
        z-index: 2;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 2rem;
    }
    
    .search-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10vh;
    }
    
    .logo {
        font-size: 2.5rem;
        margin-bottom: 2rem;
        color: var(--primary);
        text-shadow: 0 0 10px var(--primary);
        animation: pulse 2s infinite;
    }
    
    .search-box {
        width: 100%;
        max-width: 600px;
        position: relative;
    }
    
    .search-input {
        width: 100%;
        padding: 1rem;
        background: rgba(0, 26, 15, 0.9);
        border: 2px solid var(--primary);
        border-radius: 5px;
        color: var(--light);
        font-size: 1.1rem;
        transition: all 0.3s ease;
    }
    
    .search-input:focus {
        outline: none;
        box-shadow: 0 0 15px var(--primary);
    }
    
    .search-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--primary);
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        color: var(--dark);
    }
    
    .search-button:hover {
        background: var(--accent);
    }
    
    .results-container {
        margin-top: 2rem;
        width: 100%;
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
    }
    
    .result-card {
        background: rgba(0, 26, 15, 0.95);
        border: 1px solid var(--primary);
        margin: 1rem 0;
        padding: 1.5rem;
        border-radius: 5px;
        transform: translateX(-100%);
        opacity: 0;
        animation: slideIn 0.5s forwards;
        transition: transform 0.3s, opacity 0.3s;
    }
    
    .result-card:hover {
        transform: translateX(0);
        opacity: 1;
        box-shadow: 0 0 15px var(--primary);
    }
    
    .result-metadata {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    
    .result-title {
        color: var(--primary);
        margin-bottom: 0.5rem;
        font-size: 1.4rem;
    }
    
    .result-excerpt {
        color: var(--light);
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 1rem;
    }
    
    .classification-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.3rem 0.8rem;
        border-radius: 3px;
        font-size: 0.8rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    
    .classification-badge[data-level="TOP SECRET"] {
        background: var(--error);
        color: var(--light);
    }
    
    .classification-badge[data-level="SECRET"] {
        background: var(--warning);
        color: var(--dark);
    }
    
    .classification-badge[data-level="CONFIDENTIAL"] {
        background: var(--success);
        color: var(--dark);
    }
    
    .loading {
        display: none;
        margin: 2rem auto;
        width: 50px;
        height: 50px;
        border: 5px solid var(--primary);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    .search-guidelines {
        margin-top: 1rem;
        font-size: 0.8rem;
        color: var(--light);
        opacity: 0.8;
        text-align: center;
    }

    .error-message {
        color: var(--error);
        text-align: center;
        margin-top: 1rem;
    }

    .tags-container {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .tag {
        background: var(--secondary);
        color: var(--light);
        padding: 0.3rem 0.6rem;
        border-radius: 3px;
        font-size: 0.8rem;
        cursor: pointer;
        transition: background 0.3s;
    }

    .tag:hover {
        background: var(--primary);
    }

    .source-filter {
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    .source-filter label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }

    .source-filter input {
        margin-right: 0.3rem;
    }

    .summary-container {
        margin-top: 3rem;
        padding: 2rem;
        background: rgba(0, 26, 15, 0.95);
        border: 1px solid var(--primary);
        border-radius: 5px;
        animation: fadeIn 1s ease-in-out;
    }

    .summary-title {
        font-size: 1.8rem;
        color: var(--primary);
        margin-bottom: 1rem;
        text-align: center;
        text-shadow: 0 0 10px var(--primary);
    }

    .summary-content {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--light);
    }

    .classification-details {
      margin: 0.5rem 0;
      font-size: 0.8rem;
      color: var(--light);
      opacity: 0.8;
    }

    .classification-details span {
      display: block;
      margin-bottom: 0.2rem;
    }

    .classification-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .pagination-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        gap: 1rem;
    }

    .page-button {
        background: var(--secondary);
        color: var(--light);
        border: 1px solid var(--primary);
        padding: 0.5rem 1rem;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .page-button:hover:not(:disabled) {
        background: var(--primary);
        color: var(--dark);
    }

    .page-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .page-info {
        color: var(--light);
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
    }
    
    @keyframes slideIn {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Responsive Design */
    @media (max-width: 600px) {
        .result-metadata {
            flex-direction: column;
            align-items: flex-start;
        }

        .search-container {
            margin-top: 8vh;
        }

        .tags-container {
            justify-content: flex-start;
        }

        .source-filter {
            flex-direction: column;
            align-items: center;
        }

        .summary-content {
            font-size: 0.9rem;
        }
    }
    </style>
</head>
<body>
    <div id="particles-js"></div>

    <div class="container">
        <div class="search-container">
            <div class="logo">CLASSIFIED ARCHIVES</div>
            <div class="search-box">
                <input type="text" class="search-input" placeholder="Enter specific search terms (e.g., &apos;Operation Paperclip 1945-1959&apos;)" id="searchInput">
                <button class="search-button" onclick="performSearch()">SEARCH</button>
            </div>
            <div class="search-guidelines">
                Use specific dates, operation names, or document classifications for precise results
            </div>
            <div class="tags-container" id="tagsContainer"></div>
            <div class="source-filter">
                <label><input type="checkbox" id="blackVault" checked> Black Vault</label>
                <label><input type="checkbox" id="aro" checked> Anomaly Resolution Office</label>
                <label><input type="checkbox" id="wikipedia" checked> Wikipedia</label>
                <label><input type="checkbox" id="openLibrary" checked> OpenLibrary</label>
                <label><input type="checkbox" id="ai" checked> AI Analysis</label>
            </div>
        </div>
        
        <div class="loading" id="loadingSpinner"></div>
        <div class="error-message" id="errorMessage"></div>
        <div class="results-container" id="resultsContainer"></div>
        <div class="pagination-controls" id="paginationControls"></div>
        <div class="summary-container" id="summaryContainer" style="display:none;">
            <div class="summary-title">Research Summary</div>
            <div class="summary-content" id="summaryContent">
                <!-- Summary will be injected here -->
            </div>
        </div>
    </div>

    <script>particlesJS('particles-js', {
  particles: {
    number: {
      value: 60,
      density: {
        enable: true,
        value_area: 1000
      }
    },
    color: {
      value: '#00ff9d'
    },
    shape: {
      type: 'circle'
    },
    opacity: {
      value: 0.5,
      random: false
    },
    size: {
      value: 2,
      random: true
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: '#00ff9d',
      opacity: 0.3,
      width: 1
    },
    move: {
      enable: true,
      speed: 1.5,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      bounce: false
    }
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: {
        enable: true,
        mode: 'repulse'
      },
      onclick: {
        enable: true,
        mode: 'push'
      },
      resize: true
    },
    modes: {
      repulse: {
        distance: 100,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      }
    }
  },
  retina_detect: true
});
function getRandomClassification() {
  const levels = ["TOP SECRET", "SECRET", "CONFIDENTIAL"];
  return levels[Math.floor(Math.random() * levels.length)];
}
async function getSuggestedTags(query) {
  try {
    const response = await fetch('api/ai_completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        prompt: `Respond with a list of 5 suggested tags for the search query: "${query}".
                    
                    <typescript-interface>
                    interface Response {
                        ideas: string[];
                    }
                    </typescript-interface>
                    <example>
                    {
                        "ideas": ["operation", "history", "classified", "government", "documents"]
                    }
                    </example>
                    `,
        data: query
      })
    });
    const data = await response.json();
    return data.ideas;
  } catch (error) {
    console.error('Error fetching AI tags:', error);
    return [];
  }
}
function displayTags(tags) {
  const tagsContainer = document.getElementById('tagsContainer');
  tagsContainer.innerHTML = '';
  tags.forEach(tag => {
    const tagElement = document.createElement('div');
    tagElement.className = 'tag';
    tagElement.textContent = tag;
    tagElement.onclick = () => {
      document.getElementById('searchInput').value = tag;
      performSearch();
    };
    tagsContainer.appendChild(tagElement);
  });
}
const CACHE_KEY = 'searchResultsCache';
const CACHE_EXPIRY = 1000 * 60 * 60;
function getCachedResults(query) {
  try {
    const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
    const cacheEntry = cache[query];
    if (cacheEntry && Date.now() - cacheEntry.timestamp < CACHE_EXPIRY) {
      currentPage = cacheEntry.currentPage || 1;
      return cacheEntry.results;
    }
    return null;
  } catch (e) {
    console.error('Cache read error:', e);
    return null;
  }
}
function cacheResults(query, results, currentPage) {
  try {
    const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
    cache[query] = {
      results,
      currentPage,
      timestamp: Date.now()
    };
    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
  } catch (e) {
    console.error('Cache write error:', e);
  }
}
const CLASSIFICATION_SCORES = {
  'TOP SECRET': {
    score: 3,
    access: ['US_MILITARY', 'CIA', 'NSA'],
    machineRequirements: ['AIRGAPPED', 'ENCRYPTED_STORAGE']
  },
  'SECRET': {
    score: 2,
    access: ['US_GOVT', 'NATO'],
    machineRequirements: ['ENCRYPTED_STORAGE']
  },
  'CONFIDENTIAL': {
    score: 1,
    access: ['PUBLIC'],
    machineRequirements: []
  }
};
function getClassificationScore(doc) {
  const baseScore = CLASSIFICATION_SCORES[doc.classification].score;
  const accessScore = CLASSIFICATION_SCORES[doc.classification].access.length;
  const reqScore = CLASSIFICATION_SCORES[doc.classification].machineRequirements.length;
  return baseScore * (accessScore + reqScore);
}
async function performSearch() {
  const searchInput = document.getElementById('searchInput');
  const loadingSpinner = document.getElementById('loadingSpinner');
  const resultsContainer = document.getElementById('resultsContainer');
  const errorMessage = document.getElementById('errorMessage');
  const tagsContainer = document.getElementById('tagsContainer');
  const summaryContainer = document.getElementById('summaryContainer');
  const summaryContent = document.getElementById('summaryContent');
  const blackVaultCheckbox = document.getElementById('blackVault').checked;
  const aroCheckbox = document.getElementById('aro').checked;
  const wikipediaCheckbox = document.getElementById('wikipedia').checked;
  const openLibraryCheckbox = document.getElementById('openLibrary').checked;
  const aiCheckbox = document.getElementById('ai').checked;
  const query = searchInput.value.trim();
  if (!query) {
    resultsContainer.innerHTML = '';
    summaryContainer.style.display = 'none';
    errorMessage.textContent = 'Please enter a specific search query.';
    tagsContainer.innerHTML = '';
    return;
  }
  loadingSpinner.style.display = 'block';
  resultsContainer.innerHTML = '';
  errorMessage.textContent = '';
  tagsContainer.innerHTML = '';
  summaryContainer.style.display = 'none';
  summaryContent.innerHTML = '';
  try {
    let currentPage = 1;
    let totalResults = [];
    const cachedResults = getCachedResults(query);
    if (cachedResults) {
      totalResults = cachedResults;
      displayResultsPage(currentPage);
      if (aiCheckbox) {
        getSuggestedTags(query).then(displayTags);
        fetchResearchSummary(query, cachedResults).then(summary => {
          if (summary) {
            summaryContent.innerHTML = summary;
            summaryContainer.style.display = 'block';
          }
        });
      }
      return;
    }
    let combinedResults = [];
    if (blackVaultCheckbox) {
      const bvResults = await fetchBlackVault(query);
      combinedResults = combinedResults.concat(bvResults);
    }
    if (aroCheckbox) {
      const aroResults = await fetchARO(query);
      combinedResults = combinedResults.concat(aroResults);
    }
    if (wikipediaCheckbox) {
      const wikiResults = await fetchWikipedia(query);
      combinedResults = combinedResults.concat(wikiResults);
    }
    if (openLibraryCheckbox) {
      const olResults = await fetchOpenLibrary(query);
      combinedResults = combinedResults.concat(olResults);
    }
    if (aiCheckbox) {
      const aiAnalysis = await fetchAIAnalysis(query, combinedResults);
      if (aiAnalysis.length > 0) {
        combinedResults = combinedResults.concat(aiAnalysis);
      }
    }
    if (combinedResults.length === 0) {
      loadingSpinner.style.display = 'none';
      resultsContainer.innerHTML = '<div class="result-card">No classified documents found matching your search criteria.</div>';
      return;
    }
    combinedResults.sort((a, b) => {
      const scoreA = getClassificationScore(a);
      const scoreB = getClassificationScore(b);
      return scoreB - scoreA;
    });
    totalResults = combinedResults;
    cacheResults(query, combinedResults);
    displayResultsPage(currentPage);
  } catch (error) {
    console.error('Search error:', error);
    errorMessage.textContent = 'An error occurred while performing the search. Please try again later.';
  } finally {
    loadingSpinner.style.display = 'none';
  }
}
async function fetchBlackVault(query) {
  try {
    const response = await fetch(`https://api.theblackvault.com/search?query=${encodeURIComponent(query)}`);
    if (!response.ok) throw new Error('Black Vault API request failed');
    const data = await response.json();
    const results = data.results.map(item => ({
      title: item.title,
      classification: item.classification || getRandomClassification(),
      date: item.date || 'N/A',
      excerpt: item.excerpt || 'No description available.',
      documentId: `BV-${item.id}`,
      department: 'Black Vault',
      link: item.url ? `https://example.com/${item.url}` : `https://example.com/document/BV-${item.id}`
    }));
    return results;
  } catch (error) {
    console.error('Black Vault fetch error:', error);
    return [];
  }
}
async function fetchARO(query) {
  try {
    const response = await fetch(`https://aro.gov/api/search?query=${encodeURIComponent(query)}`);
    if (!response.ok) throw new Error('ARO API request failed');
    const data = await response.json();
    const results = data.records.map(item => ({
      title: item.title,
      classification: item.classification || getRandomClassification(),
      date: item.date || 'N/A',
      excerpt: item.summary || 'No description available.',
      documentId: `ARO-${item.id}`,
      department: 'Anomaly Resolution Office',
      link: item.url ? `https://example.com/${item.url}` : `https://example.com/document/ARO-${item.id}`
    }));
    return results;
  } catch (error) {
    console.error('ARO fetch error:', error);
    return [];
  }
}
async function fetchWikipedia(query) {
  try {
    const wikiResponse = await fetch(`https://en.wikipedia.org/w/api.php?origin=*&action=query&list=search&srsearch=${encodeURIComponent(query)}&format=json`);
    if (!wikiResponse.ok) throw new Error('Wikipedia API request failed');
    const wikiData = await wikiResponse.json();
    const wikiResults = wikiData.query.search.map(item => ({
      title: item.title,
      classification: getRandomClassification(),
      date: item.timestamp || 'N/A',
      excerpt: item.snippet.replace(/<\/?[^>]+(>|$)/g, ""),
      documentId: `WIKI-${item.pageid}`,
      department: 'Wikipedia API',
      link: `https://example.com/en.wikipedia.org/?curid=${item.pageid}`
    }));
    return wikiResults;
  } catch (error) {
    console.error('Wikipedia fetch error:', error);
    return [];
  }
}
async function fetchOpenLibrary(query) {
  try {
    const openLibraryResponse = await fetch(`https://openlibrary.org/search.json?q=${encodeURIComponent(query)}&limit=10`);
    if (!openLibraryResponse.ok) throw new Error('OpenLibrary API request failed');
    const olData = await openLibraryResponse.json();
    const olResults = olData.docs.map((item, index) => ({
      title: item.title,
      classification: getRandomClassification(),
      date: item.first_publish_year || 'N/A',
      excerpt: item.subject ? item.subject.join(', ') : 'No description available.',
      documentId: `OL-${item.key}`,
      department: 'OpenLibrary API',
      link: `https://example.com/openlibrary.org${item.key}`
    }));
    return olResults;
  } catch (error) {
    console.error('OpenLibrary fetch error:', error);
    return [];
  }
}
async function fetchAIAnalysis(query, documents) {
  try {
    const aiResponse = await fetch('https://example.com/api/ai_completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        prompt: `Analyze the following classified documents related to "${query}" and provide a detailed theoretical analysis with pre-computational indexing.
                    
                    Documents:
                    ${documents.map(doc => `- ${doc.title}: ${doc.excerpt}`).join('\n')}
                    
                    <typescript-interface>
                    interface AIAnalysis {
                        title: string;
                        classification: "TOP SECRET" | "SECRET" | "CONFIDENTIAL";
                        date: string;
                        excerpt: string;
                        documentId: string;
                        department: string;
                        analysis: string;
                    }
                    </typescript-interface>
                    <example>
                    {
                        "title": "Operation Paperclip: German Scientists Recruitment Analysis",
                        "classification": "TOP SECRET",
                        "date": "1945-09-15",
                        "excerpt": "Detailed assessment of 88 German scientists identified for potential recruitment...",
                        "documentId": "TS-19450915-PP88",
                        "department": "Joint Intelligence Objectives Agency",
                        "analysis": "The recruitment of German scientists under Operation Paperclip significantly advanced US aerospace capabilities..."
                    }
                    </example>
                    `,
        data: documents
      })
    });
    const aiData = await aiResponse.json();
    if (aiData.analysis) {
      return [{
        title: `AI Analysis of "${query}"`,
        classification: "CONFIDENTIAL",
        date: new Date().toISOString().split('T')[0],
        excerpt: aiData.analysis,
        documentId: `AI-${Date.now()}`,
        department: 'AI Analysis',
        link: `https://example.com/ai-analysis/${Date.now()}`
      }];
    }
    return [];
  } catch (error) {
    console.error('AI Analysis fetch error:', error);
    return [];
  }
}
async function fetchResearchSummary(query, documents) {
  try {
    const summaryResponse = await fetch('https://example.com/api/ai_completion', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        prompt: `Provide a comprehensive research summary based on the following documents related to "${query}". The summary should include detailed research pipelines, deep-learning insights, and input encoding methodologies.
                    
                    Documents:
                    ${documents.map(doc => `- ${doc.title}: ${doc.excerpt}`).join('\n')}
                    
                    <typescript-interface>
                    interface ResearchSummary {
                        summary: string;
                    }
                    </typescript-interface>
                    <example>
                    {
                        "summary": "The research on Operation Paperclip reveals a strategic initiative where deep-learning models were utilized to analyze input encoding of German scientists' data. This allowed for efficient indexing and retrieval of critical information, enhancing the operational capabilities of the Joint Intelligence Objectives Agency..."
                    }
                    </example>
                    `,
        data: documents
      })
    });
    const summaryData = await summaryResponse.json();
    if (summaryData.summary) {
      return summaryData.summary;
    }
    return null;
  } catch (error) {
    console.error('Research Summary fetch error:', error);
    return null;
  }
}
function getClassificationIcon(level) {
  let svgIcon = '';
  if (level === "TOP SECRET") {
    svgIcon = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--light)" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="12" r="10" stroke="var(--light)" stroke-width="2" fill="none"/>
                    <path d="M12 6v6l4 2" stroke="var(--light)" stroke-width="2" fill="none"/>
                </svg>
            `;
  } else if (level === "SECRET") {
    svgIcon = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--dark)" xmlns="http://www.w3.org/2000/svg">
                    <rect x="4" y="4" width="16" height="16" stroke="var(--dark)" stroke-width="2" fill="none"/>
                    <line x1="4" y1="4" x2="20" y2="20" stroke="var(--dark)" stroke-width="2"/>
                </svg>
            `;
  } else if (level === "CONFIDENTIAL") {
    svgIcon = `
                <svg width="16" height="16" viewBox="0 0 24 24" fill="var(--dark)" xmlns="http://www.w3.org/2000/svg">
                    <polygon points="12,2 2,7 12,12 22,7 12,2" stroke="var(--dark)" stroke-width="2" fill="none"/>
                    <circle cx="12" cy="16" r="4" stroke="var(--dark)" stroke-width="2" fill="none"/>
                </svg>
            `;
  }
  return svgIcon;
}
const RESULTS_PER_PAGE = 5;
let currentPage = 1;
let totalResults = [];
function displayResultsPage(page) {
  const resultsContainer = document.getElementById('resultsContainer');
  resultsContainer.innerHTML = '';
  const startIndex = (page - 1) * RESULTS_PER_PAGE;
  const endIndex = startIndex + RESULTS_PER_PAGE;
  const pageResults = totalResults.slice(startIndex, endIndex);
  pageResults.forEach((result, index) => {
    const resultCard = document.createElement('div');
    resultCard.className = 'result-card';
    resultCard.style.animationDelay = `${index * 0.05}s`;
    resultsContainer.appendChild(resultCard);
  });
  const totalPages = Math.ceil(totalResults.length / RESULTS_PER_PAGE);
  const paginationControls = document.createElement('div');
  paginationControls.className = 'pagination-controls';
  const prevButton = document.createElement('button');
  prevButton.className = 'page-button';
  prevButton.textContent = 'Previous';
  prevButton.disabled = page === 1;
  prevButton.onclick = () => {
    if (currentPage > 1) {
      currentPage--;
      displayResultsPage(currentPage);
    }
  };
  const pageInfo = document.createElement('span');
  pageInfo.className = 'page-info';
  pageInfo.textContent = `Page ${page} of ${totalPages}`;
  const nextButton = document.createElement('button');
  nextButton.className = 'page-button';
  nextButton.textContent = 'Next';
  nextButton.disabled = page >= totalPages;
  nextButton.onclick = () => {
    if (currentPage < totalPages) {
      currentPage++;
      displayResultsPage(currentPage);
    }
  };
  paginationControls.appendChild(prevButton);
  paginationControls.appendChild(pageInfo);
  paginationControls.appendChild(nextButton);
  resultsContainer.appendChild(paginationControls);
}
function displayResults(results) {
  totalResults = results;
  currentPage = 1;
  displayResultsPage(currentPage);
}
document.getElementById('searchInput').addEventListener('keypress', function (e) {
  if (e.key === 'Enter') {
    performSearch();
  }
});</script>
</body>
</html>