Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AltaVista Classic</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> | |
| @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=VT323&display=swap'); | |
| body { | |
| font-family: 'IBM Plex Mono', monospace; | |
| background-color: #f0f0f0; | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNjY2MiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4='); | |
| } | |
| .logo { | |
| font-family: 'VT323', monospace; | |
| text-shadow: 2px 2px 0px rgba(0,0,0,0.1); | |
| } | |
| .search-box { | |
| box-shadow: 3px 3px 0px rgba(0,0,0,0.1); | |
| } | |
| .button { | |
| transition: all 0.2s ease; | |
| } | |
| .button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 2px 2px 0px rgba(0,0,0,0.1); | |
| } | |
| .result-card { | |
| background: rgba(255,255,255,0.9); | |
| transition: all 0.2s ease; | |
| } | |
| .result-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 3px 3px 0px rgba(0,0,0,0.1); | |
| } | |
| .marquee { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| } | |
| .marquee span { | |
| display: inline-block; | |
| padding-left: 100%; | |
| animation: marquee 15s linear infinite; | |
| } | |
| @keyframes marquee { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(-100%, 0); } | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.8; | |
| } | |
| .glitch::before { | |
| color: #0ff; | |
| z-index: -1; | |
| animation: glitch-effect 3s infinite; | |
| } | |
| .glitch::after { | |
| color: #f0f; | |
| z-index: -2; | |
| animation: glitch-effect 2s infinite reverse; | |
| } | |
| @keyframes glitch-effect { | |
| 0% { transform: translate(0); } | |
| 20% { transform: translate(-3px, 3px); } | |
| 40% { transform: translate(-3px, -3px); } | |
| 60% { transform: translate(3px, 3px); } | |
| 80% { transform: translate(3px, -3px); } | |
| 100% { transform: translate(0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm"><i class="fas fa-home mr-1"></i> Home</span> | |
| <span class="text-sm"><i class="fas fa-info-circle mr-1"></i> About</span> | |
| <span class="text-sm"><i class="fas fa-envelope mr-1"></i> Contact</span> | |
| </div> | |
| <div class="text-sm"> | |
| <span id="date-time" class="font-mono"></span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Marquee --> | |
| <div class="bg-yellow-200 text-black py-1 px-2 border-b border-yellow-300"> | |
| <div class="marquee text-sm font-mono"> | |
| <span> | |
| <i class="fas fa-bullhorn mr-2"></i> Welcome to AltaVista Classic! The web's most comprehensive search index. | |
| <span class="mx-4">•</span> | |
| Search over 30 million web pages! | |
| <span class="mx-4">•</span> | |
| Now with 20% more web! | |
| <span class="mx-4">•</span> | |
| Try our new Babel Fish translation service! | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8 flex flex-col items-center"> | |
| <!-- Logo --> | |
| <div class="mb-8 text-center"> | |
| <h1 class="logo text-6xl md:text-7xl font-bold text-blue-700 mb-2 glitch" data-text="AltaVista">AltaVista</h1> | |
| <p class="text-gray-600 font-mono">THE INTERNET'S MOST COMPREHENSIVE SEARCH INDEX</p> | |
| </div> | |
| <!-- Search Box --> | |
| <div class="w-full max-w-2xl mb-8"> | |
| <div class="relative search-box"> | |
| <input type="text" id="search-input" | |
| class="w-full py-3 px-4 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 font-mono" | |
| placeholder="Enter your search query..."> | |
| <button id="search-button" | |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white px-4 py-1 rounded-md button"> | |
| <i class="fas fa-search mr-1"></i> Search | |
| </button> | |
| </div> | |
| <div class="flex justify-center mt-4 space-x-4"> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm button"> | |
| <i class="fas fa-font mr-1"></i> Text Search | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm button"> | |
| <i class="fas fa-image mr-1"></i> Image Search | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm button"> | |
| <i class="fas fa-music mr-1"></i> MP3 Search | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm button"> | |
| <i class="fas fa-video mr-1"></i> Video Search | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Results --> | |
| <div id="search-results" class="w-full max-w-4xl hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-lg font-bold text-gray-700">Search Results</h2> | |
| <div class="text-sm text-gray-600"> | |
| <span id="result-count">About 0 results</span> (<span id="search-time">0.01</span> seconds) | |
| </div> | |
| </div> | |
| <div id="results-container" class="space-y-4"> | |
| <!-- Results will be inserted here by JavaScript --> | |
| </div> | |
| <div class="flex justify-center mt-8"> | |
| <nav class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded button">1</button> | |
| <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded button">2</button> | |
| <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded button">3</button> | |
| <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded button">4</button> | |
| <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded button">5</button> | |
| <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded button">Next <i class="fas fa-chevron-right ml-1"></i></button> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Features --> | |
| <div class="w-full max-w-4xl mt-12 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm result-card"> | |
| <h3 class="font-bold text-blue-600 mb-2"><i class="fas fa-language mr-2"></i> Babel Fish</h3> | |
| <p class="text-sm text-gray-600 mb-3">Translate text or web pages between multiple languages instantly.</p> | |
| <button class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded button">Try it now</button> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm result-card"> | |
| <h3 class="font-bold text-blue-600 mb-2"><i class="fas fa-newspaper mr-2"></i> News</h3> | |
| <p class="text-sm text-gray-600 mb-3">Get the latest news from around the world, updated every hour.</p> | |
| <button class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded button">Browse news</button> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm result-card"> | |
| <h3 class="font-bold text-blue-600 mb-2"><i class="fas fa-shopping-bag mr-2"></i> Shopping</h3> | |
| <p class="text-sm text-gray-600 mb-3">Find products and compare prices from thousands of online stores.</p> | |
| <button class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded button">Start shopping</button> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 border-t border-gray-200 py-4 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-sm text-gray-600 mb-2 md:mb-0"> | |
| <span class="mr-4"><i class="fas fa-copyright mr-1"></i> 1995-2023 AltaVista Company</span> | |
| <span class="mr-4"><i class="fas fa-shield-alt mr-1"></i> Privacy Policy</span> | |
| <span><i class="fas fa-file-alt mr-1"></i> Terms of Service</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <span class="text-gray-600 text-sm"><i class="fas fa-globe mr-1"></i> English</span> | |
| <span class="text-gray-600 text-sm"><i class="fas fa-desktop mr-1"></i> Classic View</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Update date and time | |
| function updateDateTime() { | |
| const now = new Date(); | |
| const options = { | |
| weekday: 'long', | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric', | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| second: '2-digit' | |
| }; | |
| document.getElementById('date-time').textContent = now.toLocaleDateString('en-US', options); | |
| } | |
| setInterval(updateDateTime, 1000); | |
| updateDateTime(); | |
| // Sample search results data | |
| const sampleResults = [ | |
| { | |
| title: "Welcome to AltaVista - The Internet's Most Comprehensive Search Index", | |
| url: "https://www.altavista.com", | |
| description: "AltaVista is a web search engine that provides fast, comprehensive results for all your search needs. Search over 30 million web pages with our advanced technology.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "AltaVista - Wikipedia", | |
| url: "https://en.wikipedia.org/wiki/AltaVista", | |
| description: "AltaVista was one of the earliest web search engines, launched in 1995. It was once one of the most popular search engines but was eventually overtaken by competitors.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "AltaVista Search - The Classic Web Search Engine", | |
| url: "https://search.altavista.org", | |
| description: "Experience the nostalgia of the classic AltaVista search engine with this recreation. Search the web like it's 1999 with our retro interface.", | |
| isSponsored: true | |
| }, | |
| { | |
| title: "AltaVista Babel Fish Translation Service", | |
| url: "https://babelfish.altavista.com", | |
| description: "Translate text or entire web pages between multiple languages instantly with AltaVista's Babel Fish translation service. Supports English, French, German, Spanish and more.", | |
| isSponsored: false | |
| }, | |
| { | |
| title: "The Rise and Fall of AltaVista - Tech History", | |
| url: "https://techhistory.com/altavista", | |
| description: "A detailed look at the history of AltaVista, from its pioneering days as the first full-text web search engine to its eventual decline and acquisition by Yahoo.", | |
| isSponsored: false | |
| } | |
| ]; | |
| // Handle search | |
| document.getElementById('search-button').addEventListener('click', performSearch); | |
| document.getElementById('search-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| function performSearch() { | |
| const query = document.getElementById('search-input').value.trim(); | |
| if (query === '') return; | |
| // Show loading state | |
| const resultsContainer = document.getElementById('results-container'); | |
| resultsContainer.innerHTML = '<div class="text-center py-8"><i class="fas fa-spinner fa-spin text-3xl text-blue-600"></i><p class="mt-2">Searching the web...</p></div>'; | |
| document.getElementById('search-results').classList.remove('hidden'); | |
| // Simulate search delay | |
| setTimeout(() => { | |
| displayResults(query); | |
| }, 800); | |
| } | |
| function displayResults(query) { | |
| const resultsContainer = document.getElementById('results-container'); | |
| resultsContainer.innerHTML = ''; | |
| // Update result stats | |
| const resultCount = Math.floor(Math.random() * 500000) + 1000; | |
| document.getElementById('result-count').textContent = `About ${resultCount.toLocaleString()} results`; | |
| document.getElementById('search-time').textContent = (Math.random() * 0.5 + 0.1).toFixed(2); | |
| // Display results | |
| sampleResults.forEach((result, index) => { | |
| const resultElement = document.createElement('div'); | |
| resultElement.className = 'result-card p-4 rounded-lg border border-gray-200'; | |
| if (result.isSponsored) { | |
| resultElement.innerHTML = ` | |
| <div class="text-xs text-green-600 mb-1 font-bold"><i class="fas fa-ad mr-1"></i> Sponsored</div> | |
| <h3 class="text-lg font-bold text-blue-600 mb-1"><a href="#" class="hover:underline">${highlightQuery(result.title, query)}</a></h3> | |
| <div class="text-green-700 text-sm mb-1">${result.url}</div> | |
| <p class="text-gray-700 text-sm">${highlightQuery(result.description, query)}</p> | |
| <div class="text-xs text-gray-500 mt-2">Cached • Similar</div> | |
| `; | |
| } else { | |
| resultElement.innerHTML = ` | |
| <h3 class="text-lg font-bold text-blue-600 mb-1"><a href="#" class="hover:underline">${highlightQuery(result.title, query)}</a></h3> | |
| <div class="text-green-700 text-sm mb-1">${result.url}</div> | |
| <p class="text-gray-700 text-sm">${highlightQuery(result.description, query)}</p> | |
| <div class="text-xs text-gray-500 mt-2">Cached • Similar</div> | |
| `; | |
| } | |
| resultsContainer.appendChild(resultElement); | |
| }); | |
| // Scroll to results | |
| document.getElementById('search-results').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| function highlightQuery(text, query) { | |
| if (!query) return text; | |
| const regex = new RegExp(query, 'gi'); | |
| return text.replace(regex, match => `<span class="bg-yellow-200">${match}</span>`); | |
| } | |
| // Easter egg for nostalgia | |
| console.log("%cRemember when web search was simple? AltaVista brings back the classic web experience!", "color: #0066cc; font-size: 14px;"); | |
| </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=alvesrt/altavista-websearch" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |