<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея скриншотов</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">
<h2 class="text-2xl font-bold"><span class="font-normal">Сделано с</span> GPT-Chatbot</h2>
<p class="max-sm:text-xs max-sm:w-40">⚠️ Не сообщайте личную информацию!</p>
<a href="https://gpt-chatbot.ru/deepseek-agent" target="_blank" rel="noopener noreferrer" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Перейти к Агенту
</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>