Private-Google

Sleeping

App Files Files Community

KingNish commited on Jun 24, 2024

Commit

f497c2d

verified ·

1 Parent(s): 4183433

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +452 -310

templates/index.html CHANGED Viewed

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
- <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>HelpingAI Search</title>
@@ -10,353 +10,495 @@
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
-*{box-sizing:border-box}
-body{margin:0;padding:0;font-family:"Poppins",sans-serif;background-color:#f8f9fa}
-a{text-decoration:none;color:#1a0dab}
-a:hover{text-decoration:underline}
-.main-content{display:flex;flex-direction:column;align-items:center;padding:50px 20px}
-.search-container{width:100%;max-width:700px;position:relative;width:60%}
-.search-box{width:100%;padding:12px 16px;border:2px solid #4285f4;border-radius:24px;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:box-shadow .2s ease-in-out,width .3s ease,border-color .3s ease;display:flex;align-items:center}
-.search-box:focus-within{box-shadow:0 4px 8px rgba(32,33,36,0.35);border-color:#ea4335}
-#search-query{width:calc(100% - 40px);border:none;outline:0;font-size:16px;padding:4px 0;transition:font-size .2s ease}
-#search-query::placeholder{color:#9aa0a6;transition:color .2s ease}
-#search-query:focus{font-size:18px}
-#search-query:focus::placeholder{color:transparent}
-#search-form button{background:0 0;border:none;cursor:pointer;padding:8px;margin-left:10px;transition:transform .2s ease}
-#search-form button:hover{transform:scale(1.1)}
-#search-form button svg{display:none}
-#search-form button::after{content:"\f002";font-family:"Font Awesome 5 Free";font-weight:900;font-size:1.2em;color:#9aa0a6;transition:color .2s ease,transform .2s ease}
-#search-form button:hover::after{color:#4285f4;transform:scale(1.1)}
-#suggestions{width:calc(80% - 32px);background-color:#fff;border:none;border-radius:8px;box-shadow:0 4px 6px rgba(32,33,36,0.28);display:none;position:absolute;top:100%;left:0;z-index:10;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;padding:10px 0}
-@keyframes spin {
-0%{transform:rotate(0)}
-100%{transform:rotate(360deg)}
-}
-#suggestions ul{list-style-type:none;padding:0;margin:0}
-#suggestions li{padding:8px 12px;cursor:pointer;border-bottom:1px solid #eee;transition:background-color .2s ease}
-#suggestions li:hover{background-color:#e9e9e9}
-#suggestions li.selected{background-color:#f0f0f0}
-.search-box:focus-within + #suggestions,.search-box:hover + #suggestions{display:block;opacity:1;transform:translateY(0)}
-#results{width:100%;max-width:700px;margin-top:20px}
-.result{margin-bottom:20px;padding:15px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;animation:fadeInUp .5s ease forwards}
-@keyframes fadeInUp {
-from{opacity:0;transform:translateY(20px)}
-to{opacity:1;transform:translateY(0)}
-}
-.result.show{opacity:1;transform:translateY(0)}
-.result:hover{box-shadow:0 4px 8px rgba(0,0,0,0.2)}
-.result h3{margin:0 0 5px;font-size:1.2rem;color:#222}
-.result .url{color:#202124;font-size:.9rem;margin-bottom:8px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.result p{color:#555;font-size:.9rem;line-height:1.6em;margin:0}
-.loading-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0);z-index:1000}
-.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:5px solid #f3f3f3;border-top:5px solid #3498db;animation:spin 1.2s linear infinite}
-#no-results{display:none;text-align:center;padding:20px;font-size:1.1em;color:#555}
-#loading-more{display:none;text-align:center;padding:10px}
-#loading-more.active{display:block}
   </style>
- </head>
- <body>
-  <div class="main-content">
-   <div class="search-container">
-    <form id="search-form">
-     <div class="search-box">
-      <input type="text" id="search-query" placeholder="Search the web" autocomplete="off">
-      <button type="submit"></button>
-     </div>
-     <div id="suggestions"></div>
-    </form>
-   </div>
-   <div id="results-info" style="text-align: center;"></div>
-   <div id="results"></div>
-   <div id="no-results">
-    <p>No results found. Try refining your search.</p>
-   </div>
-   <div id="loading-more">Loading more results...</div>
-   <div class="loading-overlay">
-    <div class="loading-spinner"></div>
-   </div>
   </div>
   <script>
-   const BASE_URL = "https://oevortex-webscout-api.hf.space";
-   const searchForm = document.getElementById("search-form");
-   const searchQueryInput = document.getElementById("search-query");
-   const resultsContainer = document.getElementById("results");
-   const suggestionsContainer = document.getElementById("suggestions");
-   const loadingOverlay = document.querySelector('.loading-overlay');
-   const noResultsMessage = document.getElementById('no-results');
-   const loadingMoreIndicator = document.getElementById('loading-more');
-   const INITIAL_RESULTS = 5;
-   const CACHED_RESULTS = 50;
-   const RESULTS_PER_PAGE = 10;
-   let allResultsFetched = false;
-   const seenUrls = new Set();
-   let selectedSuggestionIndex = -1;
-   let suggestionRequestTimeout;
-   let cachedSearchResults = [];
-   const suggestionCache = {};
-   let prefetchTimeout;
-   function debounce(func, delay) {
-    return function() {
-     clearTimeout(suggestionRequestTimeout);
-     suggestionRequestTimeout = setTimeout(() => {
       func.apply(this, arguments);
-     }, delay);
-    };
-   }
-   async function fetchSuggestions(query) {
-    if (suggestionCache[query]) {
-     return suggestionCache[query];
-    }
-    try {
-     const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
-     if (response.ok) {
       const suggestions = await response.json();
       suggestionCache[query] = suggestions;
       return suggestions;
-     } else {
       console.error("Error fetching suggestions:", response.status);
       return [];
-     }
-    } catch (error) {
-     console.error("Error fetching suggestions:", error);
-     return [];
-    }
-   }
-   searchQueryInput.addEventListener("input", () => {
-    clearTimeout(prefetchTimeout);
-    const searchQuery = searchQueryInput.value.trim();
-    if (searchQuery === "") {
-     suggestionsContainer.style.display = "none";
-     return;
     }
-    prefetchTimeout = setTimeout(async () => {
-     const suggestions = await fetchSuggestions(searchQuery);
-     displaySuggestions(suggestions);
-    }, 100);
-   });
-   function displaySuggestions(suggestions) {
-    suggestionsContainer.innerHTML = "";
-    if (suggestions.length === 0 || searchQueryInput.value.trim() === "") {
-     suggestionsContainer.style.display = "none";
-     return;
-    }
-    const suggestionList = document.createElement("ul");
-    suggestions.forEach((suggestion, index) => {
-     const listItem = document.createElement("li");
-     listItem.textContent = suggestion.phrase;
-     listItem.addEventListener("click", () => {
-      searchQueryInput.value = suggestion.phrase;
-      suggestionsContainer.style.display = "none";
       performSearch(suggestion.phrase);
-     });
-     listItem.addEventListener("focus", () => {
       selectedSuggestionIndex = index;
-      updateSuggestionSelection();
-     });
-     suggestionList.appendChild(listItem);
     });
-    suggestionsContainer.appendChild(suggestionList);
-    suggestionsContainer.style.display = "block";
-   }
-   function updateSuggestionSelection() {
-    const suggestionItems = suggestionsContainer.querySelectorAll("li");
-    suggestionItems.forEach((item, index) => {
-     item.classList.toggle("selected", index === selectedSuggestionIndex);
-    });
-   }
-   function showLoading() {
-    loadingOverlay.style.display = 'block';
-   }
-   function hideLoading() {
-    loadingOverlay.style.display = 'none';
-   }
-   let startTime;
-   async function performSearch(query) {
-    showLoading();
-    seenUrls.clear();
-    allResultsFetched = false;
-    resultsContainer.innerHTML = '';
-    noResultsMessage.style.display = 'none';
-    loadingMoreIndicator.classList.remove('active');
-    suggestionsContainer.style.display = 'none';
-	startTime = performance.now();
-    const initialResults = await fetchResults(query, INITIAL_RESULTS);
-    updateURLWithQuery(query);
-    displayResults(initialResults);
-    hideLoading();
-    if (initialResults.length > 0) {
-     cachedSearchResults = await fetchResults(query, CACHED_RESULTS);
-     cachedSearchResults = removeDuplicateResults(cachedSearchResults);
-    } else {
-     cachedSearchResults = [];
-    }
-   }
-   function updateURLWithQuery(query) {
-    const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`;
-    window.history.pushState({
-     path: newURL
-    }, '', newURL);
-   }
-   function removeDuplicateResults(results) {
-    const uniqueResults = [];
-    const seen = new Set();
-    for (const result of results) {
-     if (!seen.has(result.href)) {
       seen.add(result.href);
       uniqueResults.push(result);
-     }
     }
-    return uniqueResults;
-   }
-   async function fetchResults(query, resultsPerPage) {
-    const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`);
-    if (!response.ok) {
-     displayError("An error occurred while fetching results.");
-     hideLoading();
-     return [];
-    }
-    const searchResults = await response.json();
-    return searchResults;
-   }
-   function displayResults(results, append = false) {
-    if (!append) {
-     resultsContainer.innerHTML = '';
-    }
-    const newResults = results.filter(result => !seenUrls.has(result.href));
-    newResults.forEach((result, index) => {
-     seenUrls.add(result.href);
-     const resultElement = document.createElement("div");
-     resultElement.classList.add("result");
-     const titleElement = document.createElement("h3");
-     const titleLink = document.createElement("a");
-     titleLink.href = result.href;
-     titleLink.textContent = result.title;
-     titleLink.target = "_blank";
-     titleLink.rel = "noopener noreferrer";
-     titleElement.appendChild(titleLink);
-     const urlElement = document.createElement("div");
-     urlElement.classList.add("url");
-     const urlLink = document.createElement("a");
-     urlLink.href = result.href;
-     urlLink.textContent = result.href;
-     urlLink.target = "_blank";
-     urlLink.rel = "noopener noreferrer";
-     urlElement.appendChild(urlLink);
-     const descriptionElement = document.createElement("p");
-     descriptionElement.textContent = result.body;
-     resultElement.appendChild(titleElement);
-     resultElement.appendChild(urlElement);
-     resultElement.appendChild(descriptionElement);
-     resultsContainer.appendChild(resultElement);
-     setTimeout(() => {
       resultElement.classList.add("show");
-     }, 100 * index);
-    });
-    noResultsMessage.style.display = resultsContainer.children.length === 0 ? 'block' : 'none';
-    if (!append) {
-     const endTime = performance.now();
-     const timeTaken = (endTime - startTime).toFixed(2);
-     document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`;
-    }
-   }
-   function displayError(message) {
-    resultsContainer.innerHTML = "";
-    const errorElement = document.createElement("p");
-    errorElement.textContent = message;
-    errorElement.style.color = "red";
-    resultsContainer.appendChild(errorElement);
-   }
-   searchQueryInput.addEventListener("input", debounce(async () => {
-    selectedSuggestionIndex = -1;
-    const searchQuery = searchQueryInput.value;
-    if (searchQuery.trim() === "") {
-     suggestionsContainer.style.display = "none";
-     return;
-    }
-    const suggestions = await fetchSuggestions(searchQuery);
-    displaySuggestions(suggestions);
-   }, 500));
-   searchQueryInput.addEventListener("focus", () => {
-    if (searchQueryInput.value.trim() !== "") {
-     suggestionsContainer.style.display = "block";
-    }
-   });
-   document.addEventListener("click", (event) => {
-    if (!searchForm.contains(event.target)) {
-     suggestionsContainer.style.display = "none";
-    }
-   });
-   searchQueryInput.addEventListener("keydown", async (event) => {
-    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-     event.preventDefault();
-     const suggestionItems = suggestionsContainer.querySelectorAll("li");
-     const numSuggestions = suggestionItems.length;
-     if (event.key === "ArrowUp") {
       selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
-     } else {
       selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
-     }
-     updateSuggestionSelection();
-     if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
       searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
       suggestionItems[selectedSuggestionIndex].focus();
-     }
-    } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
-     event.preventDefault();
-     const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
-     if (selectedSuggestion) {
       searchQueryInput.value = selectedSuggestion.textContent;
       suggestionsContainer.style.display = "none";
       performSearch(searchQueryInput.value);
-     }
     }
-   });
-   searchForm.addEventListener("submit", async (event) => {
     event.preventDefault();
-    selectedSuggestionIndex = -1;
-    const searchQuery = searchQueryInput.value;
-    performSearch(searchQuery);
-   });
-   window.addEventListener("scroll", () => {
-    if (allResultsFetched || cachedSearchResults.length === 0) return;
-    const {
-     scrollTop,
-     scrollHeight,
-     clientHeight
-    } = document.documentElement;
-    if (scrollTop + clientHeight >= scrollHeight - 100 && !loadingMoreIndicator.classList.contains("active")) {
-     loadingMoreIndicator.classList.add("active");
-     const resultsToDisplay = cachedSearchResults.splice(0, RESULTS_PER_PAGE);
-     if (resultsToDisplay.length > 0) {
       displayResults(resultsToDisplay, true);
-     }
-     if (cachedSearchResults.length === 0) {
       allResultsFetched = true;
-     }
-     loadingMoreIndicator.classList.remove("active");
     }
-   });
-   function getQueryParameter(name) {
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get(name);
-   }
-   window.addEventListener('load', () => {
-    const initialQuery = getQueryParameter('query');
-    if (initialQuery) {
-     searchQueryInput.value = initialQuery;
-     performSearch(initialQuery);
-    }
-   });
   </script>
- </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>HelpingAI Search</title>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <style>
+    * { box-sizing: border-box; }
+    body { margin: 0; padding: 0; font-family: "Poppins", sans-serif; background-color: #f8f9fa; }
+    a { text-decoration: none; color: #1a0dab; }
+    a:hover { text-decoration: underline; }
+    .main-content { display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
+    .search-container { width: 100%; max-width: 700px; position: relative; width: 60%; }
+    .search-box { width: 100%; padding: 12px 16px; border: 2px solid #4285f4; border-radius: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow .2s ease-in-out, width .3s ease, border-color .3s ease; display: flex; align-items: center; }
+    .search-box:focus-within { box-shadow: 0 4px 8px rgba(32, 33, 36, 0.35); border-color: #ea4335; }
+    #search-query, #main-search-query { width: calc(100% - 40px); border: none; outline: 0; font-size: 16px; padding: 4px 0; transition: font-size .2s ease; }
+    #search-query::placeholder, #main-search-query::placeholder { color: #9aa0a6; transition: color .2s ease; }
+    #search-query:focus, #main-search-query:focus { font-size: 18px; }
+    #search-query:focus::placeholder, #main-search-query:focus::placeholder { color: transparent; }
+    #search-form button, #main-search-form button { background: 0 0; border: none; cursor: pointer; padding: 8px; margin-left: 10px; transition: transform .2s ease; }
+    #search-form button:hover, #main-search-form button:hover { transform: scale(1.1); }
+    #search-form button svg, #main-search-form button svg { display: none; }
+    #search-form button::after, #main-search-form button::after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.2em; color: #9aa0a6; transition: color .2s ease, transform .2s ease; }
+    #search-form button:hover::after, #main-search-form button:hover::after { color: #4285f4; transform: scale(1.1); }
+    #suggestions, #main-suggestions { width: calc(80% - 32px); background-color: #fff; border: none; border-radius: 8px; box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28); display: none; position: absolute; top: 100%; left: 0; z-index: 10; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; padding: 10px 0; animation: slideDown 0.3s ease; }
+    @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
+    #suggestions ul, #main-suggestions ul { list-style-type: none; padding: 0; margin: 0; }
+    #suggestions li, #main-suggestions li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; transition: background-color .2s ease; }
+    #suggestions li:hover, #main-suggestions li:hover { background-color: #e9e9e9; }
+    #suggestions li.selected, #main-suggestions li.selected { background-color: #f0f0f0; }
+    .search-box:focus-within + #suggestions,
+    .search-box:focus-within + #main-suggestions {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+    }
+    #results { width: 100%; max-width: 700px; margin-top: 20px; }
+    .result { margin-bottom: 20px; padding: 15px; border-radius: 8px; background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; animation: fadeInUp .5s ease forwards; }
+    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    .result.show { opacity: 1; transform: translateY(0); }
+    .result:hover {
+      transform: scale(1.02);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    .result h3 { margin: 0 0 5px; font-size: 1.2rem; color: #222; }
+    .result .url { color: #202124; font-size: .9rem; margin-bottom: 8px; display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .result p { color: #555; font-size: .9rem; line-height: 1.6em; margin: 0; }
+    .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: 1000; }
+    .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; animation: spin 1.2s linear infinite; }
+    #no-results { display: none; text-align: center; padding: 20px; font-size: 1.1em; color: #555; }
+    #loading-more { display: none; text-align: center; padding: 10px; }
+    #loading-more.active { display: block; }
+    .intro-page { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; }
+    .intro-page h1 { font-size: 2.5em; margin-bottom: 20px; animation: fadeIn 1s ease forwards; }
+    .intro-page p { font-size: 1.2em; margin-bottom: 30px; animation: fadeIn 1.5s ease forwards; }
+    .intro-page .search-container { width: 80%; max-width: 600px; }
+    .intro-page .search-box { animation: pulse 2s infinite; }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes pulse {
+      50% { transform: scale(1.1); }
+    }
+    @keyframes slideDown {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   </style>
+</head>
+<body>
+  <div class="intro-page" id="intro-page">
+    <h1>Welcome to HelpingAI Search</h1>
+    <p>Discover the web with our powerful search engine.</p>
+    <div class="search-container">
+      <form id="search-form">
+        <div class="search-box">
+          <input type="text" id="search-query" placeholder="Search the web" autocomplete="off">
+          <button type="submit"></button>
+        </div>
+        <div id="suggestions"></div>
+      </form>
+    </div>
+  </div>
+  <div class="main-content" id="main-content">
+    <div class="search-container">
+      <form id="main-search-form">
+        <div class="search-box">
+          <input type="text" id="main-search-query" placeholder="Search the web" autocomplete="off">
+          <button type="submit"></button>
+        </div>
+        <div id="main-suggestions"></div>
+      </form>
+    </div>
+    <div id="results-info" style="text-align: center;"></div>
+    <div id="results"></div>
+    <div id="no-results">
+      <p>No results found. Try refining your search.</p>
+    </div>
+    <div id="loading-more">Loading more results...</div>
+    <div class="loading-overlay">
+      <div class="loading-spinner"></div>
+    </div>
   </div>
   <script>
+const BASE_URL = "https://oevortex-webscout-api.hf.space";
+const searchForm = document.getElementById("search-form");
+const searchQueryInput = document.getElementById("search-query");
+const mainSearchForm = document.getElementById("main-search-form");
+const mainSearchQueryInput = document.getElementById("main-search-query");
+const resultsContainer = document.getElementById("results");
+const suggestionsContainer = document.getElementById("suggestions");
+const mainSuggestionsContainer = document.getElementById("main-suggestions");
+const loadingOverlay = document.querySelector('.loading-overlay');
+const noResultsMessage = document.getElementById('no-results');
+const loadingMoreIndicator = document.getElementById('loading-more');
+const introPage = document.getElementById('intro-page');
+const mainContent = document.getElementById('main-content');
+const INITIAL_RESULTS = 5;
+const CACHED_RESULTS = 50;
+const RESULTS_PER_PAGE = 10;
+let allResultsFetched = false;
+const seenUrls = new Set();
+let selectedSuggestionIndex = -1;
+let suggestionRequestTimeout;
+let cachedSearchResults = [];
+const suggestionCache = {};
+let prefetchTimeout;
+function debounce(func, delay) {
+  return function() {
+    clearTimeout(suggestionRequestTimeout);
+    suggestionRequestTimeout = setTimeout(() => {
       func.apply(this, arguments);
+    }, delay);
+  };
+}
+async function fetchSuggestions(query) {
+  if (suggestionCache[query]) {
+    return suggestionCache[query];
+  }
+  try {
+    const response = await fetch(`${BASE_URL}/api/suggestions?q=${encodeURIComponent(query)}`);
+    if (response.ok) {
       const suggestions = await response.json();
       suggestionCache[query] = suggestions;
       return suggestions;
+    } else {
       console.error("Error fetching suggestions:", response.status);
       return [];
     }
+  } catch (error) {
+    console.error("Error fetching suggestions:", error);
+    return [];
+  }
+}
+// Event listeners for Intro Search
+searchQueryInput.addEventListener("input", () => {
+  clearTimeout(prefetchTimeout);
+  const searchQuery = searchQueryInput.value.trim();
+  if (searchQuery === "") {
+    suggestionsContainer.style.display = "none";
+    return;
+  }
+  prefetchTimeout = setTimeout(async () => {
+    const suggestions = await fetchSuggestions(searchQuery);
+    displaySuggestions(suggestions);
+  }, 100);
+});
+searchForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  selectedSuggestionIndex = -1;
+  const searchQuery = searchQueryInput.value;
+  performSearch(searchQuery);
+});
+// Event listeners for Main Content Search
+mainSearchQueryInput.addEventListener("input", () => {
+  clearTimeout(prefetchTimeout);
+  const searchQuery = mainSearchQueryInput.value.trim();
+  if (searchQuery === "") {
+    mainSuggestionsContainer.style.display = "none";
+    return;
+  }
+  prefetchTimeout = setTimeout(async () => {
+    const suggestions = await fetchSuggestions(searchQuery);
+    displaySuggestions(suggestions, mainSuggestionsContainer);
+  }, 100);
+});
+mainSearchForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  selectedSuggestionIndex = -1;
+  const searchQuery = mainSearchQueryInput.value;
+  performSearch(searchQuery);
+});
+function displaySuggestions(suggestions, container = suggestionsContainer) {
+  container.innerHTML = "";
+  if (suggestions.length === 0 || (searchQueryInput.value.trim() === "" && mainSearchQueryInput.value.trim() === "")) {
+    container.style.display = "none";
+    container.style.opacity = 0;
+    return;
+  }
+  const suggestionList = document.createElement("ul");
+  suggestions.forEach((suggestion, index) => {
+    const listItem = document.createElement("li");
+    listItem.textContent = suggestion.phrase;
+    listItem.addEventListener("click", () => {
+      if (container === suggestionsContainer) {
+        searchQueryInput.value = suggestion.phrase;
+      } else {
+        mainSearchQueryInput.value = suggestion.phrase;
+      }
+      container.style.display = "none";
+      container.style.opacity = 0;
       performSearch(suggestion.phrase);
+    });
+    listItem.addEventListener("focus", () => {
       selectedSuggestionIndex = index;
+      updateSuggestionSelection(container);
     });
+    suggestionList.appendChild(listItem);
+  });
+  container.appendChild(suggestionList);
+  container.style.display = "block";
+  container.style.opacity = 1;
+}
+function updateSuggestionSelection(container) {
+  const suggestionItems = container.querySelectorAll("li");
+  suggestionItems.forEach((item, index) => {
+    item.classList.toggle("selected", index === selectedSuggestionIndex);
+  });
+  // Make sure the mainSuggestionsContainer is displayed when needed
+  if (container === mainSuggestionsContainer && selectedSuggestionIndex !== -1) {
+    mainSuggestionsContainer.style.display = "block";
+  }
+}
+function showLoading() {
+  loadingOverlay.style.display = 'block';
+}
+function hideLoading() {
+  loadingOverlay.style.display = 'none';
+}
+let startTime;
+async function performSearch(query) {
+  showLoading();
+  seenUrls.clear();
+  allResultsFetched = false;
+  resultsContainer.innerHTML = '';
+  noResultsMessage.style.display = 'none';
+  loadingMoreIndicator.classList.remove('active');
+  suggestionsContainer.style.display = 'none';
+  mainSuggestionsContainer.style.display = 'none';
+  startTime = performance.now();
+  const initialResults = await fetchResults(query, INITIAL_RESULTS);
+  updateURLWithQuery(query);
+  displayResults(initialResults);
+  hideLoading();
+  if (initialResults.length > 0) {
+    cachedSearchResults = await fetchResults(query, CACHED_RESULTS);
+    cachedSearchResults = removeDuplicateResults(cachedSearchResults);
+  } else {
+    cachedSearchResults = [];
+  }
+  introPage.style.display = 'none';
+  mainContent.style.display = 'flex';
+}
+function updateURLWithQuery(query) {
+  const newURL = `${window.location.pathname}?query=${encodeURIComponent(query)}`;
+  window.history.pushState({ path: newURL }, '', newURL);
+}
+function removeDuplicateResults(results) {
+  const uniqueResults = [];
+  const seen = new Set();
+  for (const result of results) {
+    if (!seen.has(result.href)) {
       seen.add(result.href);
       uniqueResults.push(result);
     }
+  }
+  return uniqueResults;
+}
+async function fetchResults(query, resultsPerPage) {
+  const response = await fetch(`${BASE_URL}/api/search?q=${encodeURIComponent(query)}&max_results=${resultsPerPage}`);
+  if (!response.ok) {
+    displayError("An error occurred while fetching results.");
+    hideLoading();
+    return [];
+  }
+  const searchResults = await response.json();
+  return searchResults;
+}
+function displayResults(results, append = false) {
+  if (!append) {
+    resultsContainer.innerHTML = '';
+  }
+  const newResults = results.filter(result => !seenUrls.has(result.href));
+  newResults.forEach((result, index) => {
+    seenUrls.add(result.href);
+    const resultElement = document.createElement("div");
+    resultElement.classList.add("result");
+    const titleElement = document.createElement("h3");
+    const titleLink = document.createElement("a");
+    titleLink.href = result.href;
+    titleLink.textContent = result.title;
+    titleLink.target = "_blank";
+    titleLink.rel = "noopener noreferrer";
+    titleElement.appendChild(titleLink);
+    const urlElement = document.createElement("div");
+    urlElement.classList.add("url");
+    const urlLink = document.createElement("a");
+    urlLink.href = result.href;
+    urlLink.textContent = result.href;
+    urlLink.target = "_blank";
+    urlLink.rel = "noopener noreferrer";
+    urlElement.appendChild(urlLink);
+    const descriptionElement = document.createElement("p");
+    descriptionElement.textContent = result.body;
+    resultElement.appendChild(titleElement);
+    resultElement.appendChild(urlElement);
+    resultElement.appendChild(descriptionElement);
+    resultsContainer.appendChild(resultElement);
+    setTimeout(() => {
       resultElement.classList.add("show");
+    }, 100 * index);
+  });
+  noResultsMessage.style.display = resultsContainer.children.length === 0 ? 'block' : 'none';
+  if (!append) {
+    const endTime = performance.now();
+    const timeTaken = (endTime - startTime).toFixed(2);
+    document.getElementById('results-info').textContent = `About ${timeTaken} milliseconds`;
+  }
+}
+function displayError(message) {
+  resultsContainer.innerHTML = "";
+  const errorElement = document.createElement("p");
+  errorElement.textContent = message;
+  errorElement.style.color = "red";
+  resultsContainer.appendChild(errorElement);
+}
+searchQueryInput.addEventListener("input", debounce(async () => {
+  selectedSuggestionIndex = -1;
+  const searchQuery = searchQueryInput.value;
+  if (searchQuery.trim() === "") {
+    suggestionsContainer.style.display = "none";
+    return;
+  }
+  const suggestions = await fetchSuggestions(searchQuery);
+  displaySuggestions(suggestions);
+}));
+mainSearchQueryInput.addEventListener("input", debounce(async () => {
+  selectedSuggestionIndex = -1;
+  const searchQuery = mainSearchQueryInput.value;
+  if (searchQuery.trim() === "") {
+    mainSuggestionsContainer.style.display = "none";
+    return;
+  }
+  const suggestions = await fetchSuggestions(searchQuery);
+  displaySuggestions(suggestions, mainSuggestionsContainer);
+}));
+searchQueryInput.addEventListener("focus", () => {
+  if (searchQueryInput.value.trim() !== "") {
+    suggestionsContainer.style.display = "block";
+  }
+});
+mainSearchQueryInput.addEventListener("focus", () => {
+  if (mainSearchQueryInput.value.trim() !== "") {
+    mainSuggestionsContainer.style.display = "block";
+  }
+});
+document.addEventListener("click", (event) => {
+  if (!searchForm.contains(event.target) && !mainSearchForm.contains(event.target)) {
+    suggestionsContainer.style.display = "none";
+    mainSuggestionsContainer.style.display = "none";
+  }
+});
+searchQueryInput.addEventListener("keydown", async (event) => {
+  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+    event.preventDefault();
+    const suggestionItems = suggestionsContainer.querySelectorAll("li");
+    const numSuggestions = suggestionItems.length;
+    if (event.key === "ArrowUp") {
       selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
+    } else {
       selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
+    }
+    updateSuggestionSelection(suggestionsContainer);
+    if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
       searchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
       suggestionItems[selectedSuggestionIndex].focus();
+    }
+  } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
+    event.preventDefault();
+    const selectedSuggestion = suggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
+    if (selectedSuggestion) {
       searchQueryInput.value = selectedSuggestion.textContent;
       suggestionsContainer.style.display = "none";
       performSearch(searchQueryInput.value);
     }
+  }
+});
+mainSearchQueryInput.addEventListener("keydown", async (event) => {
+  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+    event.preventDefault();
+    const suggestionItems = mainSuggestionsContainer.querySelectorAll("li");
+    const numSuggestions = suggestionItems.length;
+    if (event.key === "ArrowUp") {
+      selectedSuggestionIndex = (selectedSuggestionIndex - 1 + numSuggestions) % numSuggestions;
+    } else {
+      selectedSuggestionIndex = (selectedSuggestionIndex + 1) % numSuggestions;
+    }
+    updateSuggestionSelection(mainSuggestionsContainer);
+    if (selectedSuggestionIndex !== -1 && suggestionItems[selectedSuggestionIndex]) {
+      mainSearchQueryInput.value = suggestionItems[selectedSuggestionIndex].textContent;
+      suggestionItems[selectedSuggestionIndex].focus();
+    }
+  } else if (event.key === "Enter" && selectedSuggestionIndex !== -1) {
     event.preventDefault();
+    const selectedSuggestion = mainSuggestionsContainer.querySelectorAll("li")[selectedSuggestionIndex];
+    if (selectedSuggestion) {
+      mainSearchQueryInput.value = selectedSuggestion.textContent;
+      mainSuggestionsContainer.style.display = "none";
+      performSearch(mainSearchQueryInput.value);
+    }
+  }
+});
+searchForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  selectedSuggestionIndex = -1;
+  const searchQuery = searchQueryInput.value;
+  performSearch(searchQuery);
+});
+mainSearchForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  selectedSuggestionIndex = -1;
+  const searchQuery = mainSearchQueryInput.value;
+  performSearch(searchQuery);
+});
+window.addEventListener("scroll", () => {
+  if (allResultsFetched || cachedSearchResults.length === 0) return;
+  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+  if (scrollTop + clientHeight >= scrollHeight - 100 && !loadingMoreIndicator.classList.contains("active")) {
+    loadingMoreIndicator.classList.add("active");
+    const resultsToDisplay = cachedSearchResults.splice(0, RESULTS_PER_PAGE);
+    if (resultsToDisplay.length > 0) {
       displayResults(resultsToDisplay, true);
+    }
+    if (cachedSearchResults.length === 0) {
       allResultsFetched = true;
     }
+    loadingMoreIndicator.classList.remove("active");
+  }
+});
+function getQueryParameter(name) {
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.get(name);
+}
+window.addEventListener('load', () => {
+  const initialQuery = getQueryParameter('query');
+  if (initialQuery) {
+    mainSearchQueryInput.value = initialQuery;
+    performSearch(initialQuery);
+  } else {
+    introPage.style.display = 'flex';
+    mainContent.style.display = 'none';
+  }
+});
   </script>
+</body>
 </html>