Websearch

Running

File size: 17,271 Bytes

6beebcb

<!DOCTYPE html>
<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>