Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Private Search</title> | |
| <link rel="icon" href="https://www.gstatic.com/favicon/favicon.ico" type="image/x-icon"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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;} | |
| .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"> | |
| <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> | |
| <h1>Welcome to Private Search</h1> | |
| <p>Explore the web with our powerful search engine that guarantees 100% privacy.</p> | |
| </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'; | |
| // Initialize startTime here | |
| 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 / 2 - startTime/2).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 - 50 && !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> |