Websearch

Running

App Files Files Community

alvesrt commited on Apr 2

Commit

6beebcb

verified ·

1 Parent(s): 6c74ca2

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +351 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Altavista Websearch
-emoji: 🚀
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: altavista-websearch
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,351 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>