| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TimeCapsule Search | Internet Archive</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=Space+Mono:wght@400;700&display=swap'); |
| |
| body { |
| font-family: 'Space Mono', monospace; |
| background-color: #f0f4f8; |
| background-image: radial-gradient(#cbd5e1 1px, transparent 1px); |
| background-size: 20px 20px; |
| } |
| |
| .vintage-card { |
| border: 1px solid rgba(0,0,0,0.1); |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), |
| 0 2px 4px -1px rgba(0, 0, 0, 0.06), |
| inset 0 0 10px rgba(0,0,0,0.05); |
| transition: all 0.3s ease; |
| } |
| |
| .vintage-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), |
| 0 4px 6px -2px rgba(0, 0, 0, 0.05), |
| inset 0 0 10px rgba(0,0,0,0.05); |
| } |
| |
| .search-box { |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), |
| 0 1px 2px 0 rgba(0, 0, 0, 0.06), |
| inset 0 0 10px rgba(0,0,0,0.05); |
| } |
| |
| .typewriter { |
| border-right: 3px solid; |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #3b82f6; } |
| } |
| |
| .fade-in { |
| animation: fadeIn 1s; |
| } |
| |
| @keyframes fadeIn { |
| 0% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto"> |
| |
| <header class="text-center mb-12"> |
| <div class="flex justify-center items-center mb-4"> |
| <i class="fas fa-book text-yellow-600 text-4xl mr-3"></i> |
| <h1 class="text-4xl font-bold text-gray-800">TimeCapsule Search</h1> |
| </div> |
| <p class="text-gray-600 max-w-2xl mx-auto"> |
| Dive into the digital archives of the past. Search through millions of web pages, books, videos, audio files, and software preserved for future generations. |
| </p> |
| </header> |
| |
| |
| <div class="max-w-2xl mx-auto mb-16 relative"> |
| <div class="relative flex items-center"> |
| <input |
| type="text" |
| id="search-input" |
| placeholder="Search the archive..." |
| class="search-box w-full pl-12 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" |
| > |
| <i class="fas fa-search absolute left-4 text-gray-400"></i> |
| <button |
| id="search-button" |
| class="absolute right-2 bg-blue-600 text-white px-4 py-1.5 rounded-md hover:bg-blue-700 transition-colors" |
| > |
| Explore |
| </button> |
| </div> |
| |
| |
| <div class="flex flex-wrap justify-center mt-4 gap-2"> |
| <button class="filter-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm text-gray-700 transition-colors" data-type="web"> |
| <i class="fas fa-globe mr-1"></i> Web |
| </button> |
| <button class="filter-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm text-gray-700 transition-colors" data-type="texts"> |
| <i class="fas fa-book mr-1"></i> Texts |
| </button> |
| <button class="filter-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm text-gray-700 transition-colors" data-type="video"> |
| <i class="fas fa-film mr-1"></i> Video |
| </button> |
| <button class="filter-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm text-gray-700 transition-colors" data-type="audio"> |
| <i class="fas fa-music mr-1"></i> Audio |
| </button> |
| <button class="filter-btn bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full text-sm text-gray-700 transition-colors" data-type="software"> |
| <i class="fas fa-file-code mr-1"></i> Software |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-2xl mx-auto mb-12 px-4"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="text-sm text-gray-600">Time Travel:</span> |
| <span id="year-display" class="font-bold text-blue-600">2000</span> |
| </div> |
| <input |
| type="range" |
| id="year-slider" |
| min="1996" |
| max="2023" |
| value="2000" |
| class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" |
| > |
| </div> |
| |
| |
| <div class="mb-12"> |
| <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">Featured Collections</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="vintage-card bg-white p-6 rounded-lg flex flex-col hover:bg-yellow-50"> |
| <i class="fas fa-laptop-code text-3xl text-yellow-600 mb-3"></i> |
| <h3 class="text-xl font-semibold mb-2">Software Library</h3> |
| <p class="text-gray-600 mb-4 flex-grow">Explore thousands of historical software programs from the early days of computing.</p> |
| <button class="collection-btn mt-auto self-start text-blue-600 hover:text-blue-800 text-sm font-medium" data-collection="software">Browse →</button> |
| </div> |
| |
| <div class="vintage-card bg-white p-6 rounded-lg flex flex-col hover:bg-blue-50"> |
| <i class="fas fa-newspaper text-3xl text-blue-600 mb-3"></i> |
| <h3 class="text-xl font-semibold mb-2">News & Magazines</h3> |
| <p class="text-gray-600 mb-4 flex-grow">Historical periodicals, newspapers, and magazines from around the world.</p> |
| <button class="collection-btn mt-auto self-start text-blue-600 hover:text-blue-800 text-sm font-medium" data-collection="news">Browse →</button> |
| </div> |
| |
| <div class="vintage-card bg-white p-6 rounded-lg flex flex-col hover:bg-green-50"> |
| <i class="fas fa-music text-3xl text-green-600 mb-3"></i> |
| <h3 class="text-xl font-semibold mb-2">Live Music Archive</h3> |
| <p class="text-gray-600 mb-4 flex-grow">Thousands of concert recordings from independent artists and iconic performances.</p> |
| <button class="collection-btn mt-auto self-start text-blue-600 hover:text-blue-800 text-sm font-medium" data-collection="music">Browse →</button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="results-container" class="hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 id="results-title" class="text-2xl font-semibold text-gray-800">Search Results</h2> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-600 mr-2">Sort by:</span> |
| <select id="sort-by" class="border rounded px-2 py-1 text-sm bg-white"> |
| <option value="relevance">Relevance</option> |
| <option value="newest">Newest First</option> |
| <option value="oldest">Oldest First</option> |
| </select> |
| </div> |
| </div> |
| |
| <div id="results-list" class="space-y-6"> |
| |
| </div> |
| |
| <div class="flex justify-center mt-8"> |
| <button id="load-more" class="bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded text-gray-700"> |
| Load More Results |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="recent-searches" class="bg-white bg-opacity-70 backdrop-filter backdrop-blur-sm p-6 rounded-lg shadow-sm mt-12"> |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Searches</h2> |
| <div class="flex flex-wrap gap-2"> |
| |
| <span class="text-gray-600">No recent searches yet</span> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const searchInput = document.getElementById('search-input'); |
| const searchButton = document.getElementById('search-button'); |
| const yearSlider = document.getElementById('year-slider'); |
| const yearDisplay = document.getElementById('year-display'); |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| const collectionButtons = document.querySelectorAll('.collection-btn'); |
| const resultsContainer = document.getElementById('results-container'); |
| const resultsList = document.getElementById('results-list'); |
| const resultsTitle = document.getElementById('results-title'); |
| const sortBy = document.getElementById('sort-by'); |
| const loadMore = document.getElementById('load-more'); |
| |
| |
| const placeholderTexts = [ |
| "Search for '90s websites...", |
| "Look up classic software...", |
| "Find historical newspapers...", |
| "Explore concert recordings...", |
| "Discover vintage computer manuals..." |
| ]; |
| |
| let currentPlaceholder = 0; |
| |
| function cyclePlaceholder() { |
| searchInput.placeholder = ''; |
| const text = placeholderTexts[currentPlaceholder]; |
| let i = 0; |
| |
| const typeWriter = setInterval(() => { |
| if (i < text.length) { |
| searchInput.placeholder += text.charAt(i); |
| i++; |
| } else { |
| clearInterval(typeWriter); |
| setTimeout(() => { |
| currentPlaceholder = (currentPlaceholder + 1) % placeholderTexts.length; |
| cyclePlaceholder(); |
| }, 3000); |
| } |
| }, 100); |
| } |
| |
| |
| setTimeout(cyclePlaceholder, 1000); |
| |
| |
| yearSlider.addEventListener('input', function() { |
| yearDisplay.textContent = this.value; |
| }); |
| |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const type = this.getAttribute('data-type'); |
| searchInput.placeholder = `Search ${type} collections...`; |
| searchInput.focus(); |
| |
| |
| filterButtons.forEach(btn => btn.classList.remove('bg-blue-100', 'text-blue-700')); |
| this.classList.add('bg-blue-100', 'text-blue-700'); |
| }); |
| }); |
| |
| |
| collectionButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const collection = this.getAttribute('data-collection'); |
| performSearch('', collection); |
| }); |
| }); |
| |
| |
| function performSearch(query, collection = '') { |
| if (!query && !collection) return; |
| |
| |
| resultsList.innerHTML = '<div class="text-center py-12"><i class="fas fa-spinner fa-spin text-4xl text-blue-500 mb-4"></i><p>Searching the archives...</p></div>'; |
| resultsContainer.classList.remove('hidden'); |
| |
| |
| let title = 'Search Results'; |
| if (collection === 'software') title = 'Software Library'; |
| else if (collection === 'news') title = 'News & Magazines'; |
| else if (collection === 'music') title = 'Live Music Archive'; |
| resultsTitle.textContent = title; |
| |
| |
| if (query) { |
| storeRecentSearch(query); |
| } |
| |
| |
| setTimeout(() => { |
| |
| const mockResults = generateMockResults(query, collection); |
| displayResults(mockResults); |
| }, 1500); |
| } |
| |
| |
| function generateMockResults(query, collection) { |
| const collections = { |
| 'software': ['Windows 95', 'Mac OS 7', 'MS-DOS 6.22', 'Linux 0.01', 'Netscape Navigator'], |
| 'news': ['Time Magazine 1999', 'Newsweek 2001', 'Wired 1995', 'National Geographic 1985', 'PC Magazine 1990'], |
| 'music': ['Grateful Dead 1977', 'Nirvana 1993', 'Radiohead 2001', 'Pink Floyd 1980', 'The Beatles 1966'], |
| '': ['Wayback Machine', 'Classic Websites', 'Vintage Computers', 'Historical Documents', 'Old Books Collection'] |
| }; |
| |
| const results = collections[collection] || [ |
| `Results for "${query}" from ${yearDisplay.textContent}`, |
| 'Internet history archive', |
| 'Digital preservation project', |
| 'Historical web pages collection', |
| 'Public domain media library' |
| ]; |
| |
| return results.map((title, index) => ({ |
| id: Date.now() + index, |
| title: collection ? title : `${title} (${2000 + index})`, |
| description: `This is a sample description of ${title.toLowerCase()}. The Internet Archive is a non-profit library of millions of free books, movies, software, music, websites, and more.`, |
| type: collection || ['web', 'text', 'video', 'audio', 'software'][index % 5], |
| url: `https://archive.org/details/${title.toLowerCase().replace(/\s+/g, '-')}`, |
| date: new Date(2000 + index, index % 12, (index % 28) + 1).toLocaleDateString() |
| })); |
| } |
| |
| |
| function displayResults(results) { |
| resultsList.innerHTML = ''; |
| |
| if (results.length === 0) { |
| resultsList.innerHTML = '<div class="text-center py-12 text-gray-500">No results found. Try a different search.</div>'; |
| return; |
| } |
| |
| results.forEach(result => { |
| const typeIcons = { |
| 'web': 'fas fa-globe', |
| 'text': 'fas fa-book', |
| 'video': 'fas fa-film', |
| 'audio': 'fas fa-headphones', |
| 'software': 'fas fa-file-code' |
| }; |
| |
| const resultItem = document.createElement('div'); |
| resultItem.className = 'vintage-card bg-white p-6 rounded-lg hover:shadow-md transition-shadow fade-in'; |
| resultItem.innerHTML = ` |
| <div class="flex items-start"> |
| <div class="flex-shrink-0"> |
| <i class="${typeIcons[result.type] || 'fas fa-archive'} text-xl text-yellow-600 mr-4 mt-1"></i> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-blue-700 mb-1"> |
| <a href="${result.url}" target="_blank" class="hover:underline">${result.title}</a> |
| </h3> |
| <p class="text-gray-600 text-sm mb-2">${result.description}</p> |
| <div class="flex items-center text-xs text-gray-500"> |
| <span class="inline-block px-2 py-1 bg-gray-100 rounded-full mr-2">${result.type}</span> |
| <span>${result.date}</span> |
| </div> |
| </div> |
| </div> |
| `; |
| resultsList.appendChild(resultItem); |
| }); |
| } |
| |
| |
| function storeRecentSearch(query) { |
| let recentSearches = JSON.parse(localStorage.getItem('recentSearches')) || []; |
| recentSearches = recentSearches.filter(item => item !== query); |
| recentSearches.unshift(query); |
| recentSearches = recentSearches.slice(0, 5); |
| localStorage.setItem('recentSearches', JSON.stringify(recentSearches)); |
| |
| updateRecentSearchesDisplay(); |
| } |
| |
| |
| function updateRecentSearchesDisplay() { |
| const recentSearches = JSON.parse(localStorage.getItem('recentSearches')) || []; |
| const recentSearchesContainer = document.querySelector('#recent-searches > div'); |
| |
| if (recentSearches.length === 0) { |
| recentSearchesContainer.innerHTML = '<span class="text-gray-600">No recent searches yet</span>'; |
| return; |
| } |
| |
| recentSearchesContainer.innerHTML = ''; |
| recentSearches.forEach(search => { |
| const searchPill = document.createElement('span'); |
| searchPill.className = 'inline-block px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 cursor-pointer transition-colors'; |
| searchPill.textContent = search; |
| searchPill.addEventListener('click', () => { |
| searchInput.value = search; |
| searchInput.focus(); |
| }); |
| recentSearchesContainer.appendChild(searchPill); |
| }); |
| } |
| |
| |
| loadMore.addEventListener('click', function() { |
| const currentQuery = searchInput.value; |
| const mockResults = generateMockResults(currentQuery, ''); |
| displayResults(mockResults); |
| }); |
| |
| |
| searchButton.addEventListener('click', () => { |
| const query = searchInput.value.trim(); |
| if (query) { |
| performSearch(query); |
| } |
| }); |
| |
| searchInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| const query = searchInput.value.trim(); |
| if (query) { |
| performSearch(query); |
| } |
| } |
| }); |
| |
| |
| sortBy.addEventListener('change', function() { |
| |
| console.log('Sorting by:', this.value); |
| }); |
| |
| |
| updateRecentSearchesDisplay(); |
| |
| |
| searchInput.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=silos559/webs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
