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