Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MetaSearch - Compare Search Engines</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .search-column { | |
| transition: all 0.3s ease; | |
| } | |
| .search-column:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .iframe-container { | |
| position: relative; | |
| overflow: hidden; | |
| padding-top: 100%; | |
| } | |
| .iframe-container iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .search-input { | |
| transition: all 0.3s ease; | |
| } | |
| .search-input:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .engine-option { | |
| transition: all 0.2s ease; | |
| } | |
| .engine-option:hover { | |
| transform: scale(1.05); | |
| } | |
| .engine-option input:checked + label { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-blue-600 mb-2">MetaSearch</h1> | |
| <p class="text-gray-600">Compare search results across multiple engines simultaneously</p> | |
| </header> | |
| <!-- Search Section --> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8"> | |
| <div class="flex items-center"> | |
| <div class="relative flex-grow"> | |
| <input | |
| type="text" | |
| id="searchQuery" | |
| placeholder="Search the web..." | |
| class="search-input w-full py-4 px-6 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500" | |
| > | |
| <button | |
| id="searchButton" | |
| class="absolute right-0 top-0 h-full px-4 text-gray-500 hover:text-blue-500 focus:outline-none" | |
| > | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <button | |
| id="searchSubmit" | |
| class="bg-blue-600 hover:bg-blue-700 text-white py-4 px-6 rounded-r-lg transition duration-300" | |
| > | |
| Search | |
| </button> | |
| </div> | |
| <!-- Search Engine Selection --> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-3">Select Search Engines:</h3> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3"> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="google" name="engine" value="google" checked class="hidden peer"> | |
| <label for="google" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://www.google.com/favicon.ico" alt="Google" class="w-5 h-5 mr-2"> | |
| <span>Google</span> | |
| </label> | |
| </div> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="bing" name="engine" value="bing" class="hidden peer"> | |
| <label for="bing" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://www.bing.com/favicon.ico" alt="Bing" class="w-5 h-5 mr-2"> | |
| <span>Bing</span> | |
| </label> | |
| </div> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="yahoo" name="engine" value="yahoo" class="hidden peer"> | |
| <label for="yahoo" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://www.yahoo.com/favicon.ico" alt="Yahoo" class="w-5 h-5 mr-2"> | |
| <span>Yahoo</span> | |
| </label> | |
| </div> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="duckduckgo" name="engine" value="duckduckgo" class="hidden peer"> | |
| <label for="duckduckgo" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://duckduckgo.com/favicon.ico" alt="DuckDuckGo" class="w-5 h-5 mr-2"> | |
| <span>DuckDuckGo</span> | |
| </label> | |
| </div> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="baidu" name="engine" value="baidu" class="hidden peer"> | |
| <label for="baidu" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://www.baidu.com/favicon.ico" alt="Baidu" class="w-5 h-5 mr-2"> | |
| <span>Baidu</span> | |
| </label> | |
| </div> | |
| <div class="engine-option"> | |
| <input type="checkbox" id="yandex" name="engine" value="yandex" class="hidden peer"> | |
| <label for="yandex" class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:bg-blue-50"> | |
| <img src="https://yandex.com/favicon.ico" alt="Yandex" class="w-5 h-5 mr-2"> | |
| <span>Yandex</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="resultsContainer" class="hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Search Results for: <span id="queryDisplay" class="text-blue-600"></span></h2> | |
| <button id="newSearchBtn" class="text-blue-600 hover:text-blue-800 flex items-center"> | |
| <i class="fas fa-redo mr-2"></i> New Search | |
| </button> | |
| </div> | |
| <div id="searchColumns" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Columns will be added dynamically here --> | |
| </div> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="text-center py-16"> | |
| <div class="inline-block p-6 bg-blue-100 rounded-full mb-4"> | |
| <i class="fas fa-search text-blue-600 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-700 mb-2">Ready to compare search engines?</h3> | |
| <p class="text-gray-500 max-w-md mx-auto">Enter your search query above and select which search engines you want to compare.</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const searchQuery = document.getElementById('searchQuery'); | |
| const searchButton = document.getElementById('searchButton'); | |
| const searchSubmit = document.getElementById('searchSubmit'); | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const emptyState = document.getElementById('emptyState'); | |
| const searchColumns = document.getElementById('searchColumns'); | |
| const queryDisplay = document.getElementById('queryDisplay'); | |
| const newSearchBtn = document.getElementById('newSearchBtn'); | |
| // Search engine URLs mapping | |
| const engineUrls = { | |
| google: 'https://www.google.com/search?q=', | |
| bing: 'https://www.bing.com/search?q=', | |
| yahoo: 'https://search.yahoo.com/search?p=', | |
| duckduckgo: 'https://duckduckgo.com/?q=', | |
| baidu: 'https://www.baidu.com/s?wd=', | |
| yandex: 'https://yandex.com/search/?text=' | |
| }; | |
| // Engine display names | |
| const engineNames = { | |
| google: 'Google', | |
| bing: 'Bing', | |
| yahoo: 'Yahoo', | |
| duckduckgo: 'DuckDuckGo', | |
| baidu: 'Baidu', | |
| yandex: 'Yandex' | |
| }; | |
| // Engine icons (using Font Awesome as fallback) | |
| const engineIcons = { | |
| google: 'fab fa-google', | |
| bing: 'fab fa-microsoft', | |
| yahoo: 'fab fa-yahoo', | |
| duckduckgo: 'fas fa-search', | |
| baidu: 'fas fa-bold', | |
| yandex: 'fas fa-y-combinator' | |
| }; | |
| // Handle search submission | |
| function performSearch() { | |
| const query = searchQuery.value.trim(); | |
| if (!query) return; | |
| // Get selected engines | |
| const selectedEngines = Array.from(document.querySelectorAll('input[name="engine"]:checked')) | |
| .map(el => el.value); | |
| if (selectedEngines.length === 0) { | |
| alert('Please select at least one search engine'); | |
| return; | |
| } | |
| // Display results | |
| emptyState.classList.add('hidden'); | |
| resultsContainer.classList.remove('hidden'); | |
| queryDisplay.textContent = query; | |
| // Clear previous results | |
| searchColumns.innerHTML = ''; | |
| // Create columns for each selected engine | |
| selectedEngines.forEach((engine, index) => { | |
| const column = document.createElement('div'); | |
| column.className = `search-column bg-white rounded-xl shadow-md overflow-hidden fade-in`; | |
| column.style.animationDelay = `${index * 0.1}s`; | |
| // Column header | |
| const header = document.createElement('div'); | |
| header.className = 'bg-gray-50 px-4 py-3 border-b border-gray-200 flex items-center'; | |
| const icon = document.createElement('i'); | |
| icon.className = engineIcons[engine] + ' mr-2 text-blue-500'; | |
| const title = document.createElement('h3'); | |
| title.className = 'font-medium text-gray-700'; | |
| title.textContent = engineNames[engine]; | |
| header.appendChild(icon); | |
| header.appendChild(title); | |
| // Iframe for search results | |
| const iframeContainer = document.createElement('div'); | |
| iframeContainer.className = 'iframe-container'; | |
| const iframe = document.createElement('iframe'); | |
| iframe.src = engineUrls[engine] + encodeURIComponent(query); | |
| iframe.setAttribute('frameborder', '0'); | |
| iframe.setAttribute('allow', ''); | |
| iframeContainer.appendChild(iframe); | |
| // Append elements to column | |
| column.appendChild(header); | |
| column.appendChild(iframeContainer); | |
| // Add column to container | |
| searchColumns.appendChild(column); | |
| }); | |
| // Scroll to results | |
| resultsContainer.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Event listeners | |
| searchSubmit.addEventListener('click', performSearch); | |
| searchButton.addEventListener('click', performSearch); | |
| searchQuery.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| newSearchBtn.addEventListener('click', function() { | |
| resultsContainer.classList.add('hidden'); | |
| emptyState.classList.remove('hidden'); | |
| searchQuery.focus(); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=musicakamusic/side-by-side" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |