Spaces:

silos559
/

webs

Running

App Files Files Community

silos559 commited on Apr 27, 2025

Commit

e3b45ea

verified ·

1 Parent(s): 59b93bd

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +437 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: webs
+emoji: 🐳
+colorFrom: pink
+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,437 @@
-<!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>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 -->
+        <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>
+        <!-- Search Box -->
+        <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>
+            <!-- Quick Filters -->
+            <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>
+        <!-- Time Machine Slider -->
+        <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>
+        <!-- Featured Collections -->
+        <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>
+        <!-- Search Results (initially hidden) -->
+        <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">
+                <!-- Results will be populated here by JavaScript -->
+            </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>
+        <!-- Recent Searches -->
+        <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">
+                <!-- Recent searches will be populated here -->
+                <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');
+            // Typewriter effect for search placeholder
+            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);
+            }
+            // Start the placeholder animation
+            setTimeout(cyclePlaceholder, 1000);
+            // Update year display when slider moves
+            yearSlider.addEventListener('input', function() {
+                yearDisplay.textContent = this.value;
+            });
+            // Set filter button
+            filterButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const type = this.getAttribute('data-type');
+                    searchInput.placeholder = `Search ${type} collections...`;
+                    searchInput.focus();
+                    // Highlight selected filter
+                    filterButtons.forEach(btn => btn.classList.remove('bg-blue-100', 'text-blue-700'));
+                    this.classList.add('bg-blue-100', 'text-blue-700');
+                });
+            });
+            // Set collection button
+            collectionButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const collection = this.getAttribute('data-collection');
+                    performSearch('', collection);
+                });
+            });
+            // Perform search function (mock implementation)
+            function performSearch(query, collection = '') {
+                if (!query && !collection) return;
+                // Show loading state
+                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');
+                // Update title
+                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;
+                // Store recent search
+                if (query) {
+                    storeRecentSearch(query);
+                }
+                // Simulate API delay
+                setTimeout(() => {
+                    // Mock data
+                    const mockResults = generateMockResults(query, collection);
+                    displayResults(mockResults);
+                }, 1500);
+            }
+            // Generate mock results
+            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()
+                }));
+            }
+            // Display results
+            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);
+                });
+            }
+            // Store recent search
+            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();
+            }
+            // Update recent searches display
+            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);
+                });
+            }
+            // Load more results
+            loadMore.addEventListener('click', function() {
+                const currentQuery = searchInput.value;
+                const mockResults = generateMockResults(currentQuery, '');
+                displayResults(mockResults);
+            });
+            // Search event listeners
+            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);
+                    }
+                }
+            });
+            // Sort results
+            sortBy.addEventListener('change', function() {
+                // In a real implementation, this would re-fetch sorted results
+                console.log('Sorting by:', this.value);
+            });
+            // Initialize recent searches display
+            updateRecentSearchesDisplay();
+            // Auto-focus search input
+            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>

prompts.txt ADDED Viewed

File without changes