Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Screenshot Gallery</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Ensure html and body take full height */ | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #1a202c; /* Dark background */ | |
| } | |
| /* Ensure the grid container takes full height */ | |
| #screenshot-grid { | |
| } | |
| /* Style for individual grid items */ | |
| .grid-item { | |
| border-radius:12px; | |
| } | |
| .grid-item:hover { | |
| filter: brightness(1.2); | |
| } | |
| /* Style for images within grid items */ | |
| .grid-item img { | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <header class="p-4 flex justify-between items-center border-b border-gray-700"> | |
| <h1 class="text-2xl font-bold"><span class="font-normal">Made with</span> DeepSite</h1> | |
| <a href="https://huggingface.co/spaces/enzostvs/deepsite" target="_blank" rel="noopener noreferrer" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> | |
| Open DeepSite | |
| </a> | |
| </header> | |
| <div id="screenshot-grid" class="grid grid-cols-2 sm:grid-cols-3 2xl:grid-cols-4 gap-2 p-4"> | |
| <!-- Screenshots will be loaded here --> | |
| </div> | |
| <script> | |
| async function loadScreenshots() { | |
| try { | |
| const response = await fetch('screenshots.json'); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const screenshots = await response.json(); | |
| const grid = document.getElementById('screenshot-grid'); | |
| grid.innerHTML = ''; // Clear existing content | |
| const fragment = document.createDocumentFragment(); // Create a fragment | |
| // Filter out non-png files just in case | |
| const imageFiles = screenshots.filter(file => file.endsWith('.png')); | |
| // Sort images in reverse alphabetical order | |
| imageFiles.sort().reverse(); | |
| // Build elements in the fragment | |
| imageFiles.forEach(filename => { | |
| const gridItem = document.createElement('div'); | |
| gridItem.className = 'grid-item'; | |
| const img = document.createElement('img'); | |
| // Assuming images are in a 'screenshots' subdirectory relative to index.html | |
| img.src = `screenshots/${filename}`; | |
| img.alt = filename; | |
| img.loading = 'lazy'; // Lazy load images | |
| img.decoding = 'async'; // Hint for async decoding | |
| // Create the link element | |
| const link = document.createElement('a'); | |
| // Parse filename to create the URL | |
| try { | |
| // Remove prefix like "7-space-" and suffix ".png" | |
| const namePart = filename.replace(/^\d+-space-/, '').replace(/\.png$/, ''); | |
| // Find the first hyphen to separate username and spacename | |
| const hyphenIndex = namePart.indexOf('-'); | |
| if (hyphenIndex > 0) { | |
| const username = namePart.substring(0, hyphenIndex); | |
| const spacename = namePart.substring(hyphenIndex + 1); | |
| link.href = `https://huggingface.co/spaces/${username}/${spacename}`; | |
| link.target = '_blank'; // Open in new tab | |
| link.rel = 'noopener noreferrer'; // Security best practice | |
| } else { | |
| // Handle cases where the format might be unexpected | |
| console.warn(`Could not parse username/spacename from: ${filename}`); | |
| // Make it non-clickable or link somewhere default? For now, just append image directly. | |
| gridItem.appendChild(img); | |
| grid.appendChild(gridItem); | |
| return; // Skip appending link for this item | |
| } | |
| } catch (e) { | |
| console.error(`Error parsing filename: ${filename}`, e); | |
| // Append image directly if parsing fails | |
| gridItem.appendChild(img); | |
| grid.appendChild(gridItem); | |
| return; // Skip appending link for this item | |
| } | |
| link.appendChild(img); // Place the image inside the link | |
| gridItem.appendChild(link); // Place the link (with image) inside the grid item | |
| fragment.appendChild(gridItem); // Add the item to the fragment | |
| }); | |
| // Append the fragment to the grid once | |
| grid.appendChild(fragment); | |
| } catch (error) { | |
| console.error('Failed to load screenshots:', error); | |
| const grid = document.getElementById('screenshot-grid'); | |
| grid.innerHTML = '<p class="text-red-500 text-center col-span-3">Failed to load screenshots. Check console for details.</p>'; | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', loadScreenshots); | |
| </script> | |
| </body> | |
| </html> | |