Screen Gallery - A collection of screen designs
@@ -128,19 +300,38 @@
const [resolution, type, ...nameParts] = parts;
const [width, height] = resolution.split('x').map(Number);
- const name = nameParts.join('_').split('.')[0];
+
+ // Check if there's a credit part (last part before extension)
+ let name = nameParts.join('_').split('.')[0];
+ let credit = null;
+
+ // If the last part is not an extension, it might be credit
+ const namePartsArray = nameParts.join('_').split('.');
+ if (namePartsArray.length > 1) {
+ const ext = namePartsArray[namePartsArray.length - 1];
+ if (ext !== 'png') {
+ // This means there's a credit part
+ const fullName = nameParts.join('_');
+ const lastHyphenIndex = fullName.lastIndexOf('-');
+ if (lastHyphenIndex > 0) {
+ name = fullName.substring(0, lastHyphenIndex);
+ credit = fullName.substring(lastHyphenIndex + 1, fullName.length - 4); // Remove .png
+ }
+ }
+ }
return {
filename,
width,
height,
type: type.toLowerCase(),
- name
+ name,
+ credit
};
}
// Function to render screens
- function renderScreens(screensToRender) {
+ function renderScreens(screensToRender, density = '2') {
const container = document.getElementById('gallery-container');
const emptyState = document.getElementById('empty-state');
@@ -151,25 +342,101 @@
}
emptyState.classList.add('hidden');
- container.innerHTML = screensToRender.map(screen => `
-
-
-
-
-
-
${screen.name.replace(/_/g, ' ')}
-
-
${screen.width}×${screen.height}
-
- ${screen.type}
-
+
+ // Determine grid classes based on density
+ let gridClass = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
+ let imageHeight = 'h-full';
+ let cardPadding = 'p-3';
+ let titleSize = 'text-base';
+
+ if (density === '1') { // Dense
+ gridClass = 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5';
+ imageHeight = 'h-full';
+ cardPadding = 'p-1';
+ titleSize = 'text-xs';
+ } else if (density === '2') { // Medium
+ gridClass = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
+ imageHeight = 'h-full';
+ cardPadding = 'p-2';
+ titleSize = 'text-sm';
+ } else if (density === '3') { // Large
+ gridClass = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
+ imageHeight = 'h-full';
+ cardPadding = 'p-4';
+ titleSize = 'text-lg';
+ }
+
+ container.className = `grid ${gridClass} gap-2`;
+
+ container.innerHTML = screensToRender.map(screen => {
+ const displayName = screen.name.replace(/_/g, ' ');
+
+ return `
+
+
+
+
+
+
${displayName}
+
+ ${screen.width}×${screen.height}
+
+ ${screen.type}
+
+
+
+
+
-
- `).join('');
+ `;
+ }).join('');
+ }
+
+ // Function to update counts
+ function updateCounts(screens) {
+ const totalCount = screens.length;
+ const splashCount = screens.filter(s => s.type === 'splash').length;
+ const loadingCount = screens.filter(s => s.type === 'loading').length;
+
+ document.getElementById('total-count').textContent = totalCount;
+ document.getElementById('splash-count').textContent = splashCount;
+ document.getElementById('loading-count').textContent = loadingCount;
+ }
+
+ // Modal functions
+ function openModal(filename, name, credit) {
+ const modal = document.getElementById('image-modal');
+ const modalImage = document.getElementById('modal-image');
+ const modalTitle = document.getElementById('modal-title');
+ const downloadBtn = document.getElementById('download-modal');
+
+ modalImage.src = `screens/${filename}`;
+ modalTitle.textContent = name;
+
+ // Set download button to use the correct filename
+ downloadBtn.onclick = function() {
+ // Create a temporary link to trigger download
+ const link = document.createElement('a');
+ link.href = `screens/${filename}`;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ };
+
+ modal.classList.remove('hidden');
+ }
+
+ function closeModal() {
+ const modal = document.getElementById('image-modal');
+ modal.classList.add('hidden');
}
// Filter and search functionality
@@ -190,7 +457,8 @@
if (searchTerm) {
filteredScreens = filteredScreens.filter(screen =>
screen.name.toLowerCase().includes(searchTerm) ||
- `${screen.width}×${screen.height}`.toLowerCase().includes(searchTerm)
+ `${screen.width}×${screen.height}`.toLowerCase().includes(searchTerm) ||
+ (screen.credit && screen.credit.toLowerCase().includes(searchTerm))
);
}
@@ -202,7 +470,7 @@
// Parse filenames to get metadata
const parsedScreens = screens.map(screen => parseFilename(screen.filename));
- // Set up filter buttons
+ // Set up filter buttons - single select with outlined style
document.querySelectorAll('.filter-btn').forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
@@ -216,6 +484,31 @@
});
});
+ // Set up density toggle buttons
+ document.getElementById('density-1').addEventListener('click', function() {
+ document.querySelectorAll('.density-btn').forEach(btn => btn.classList.remove('active'));
+ this.classList.add('active');
+ renderScreens(parsedScreens, '1');
+ });
+
+ document.getElementById('density-2').addEventListener('click', function() {
+ document.querySelectorAll('.density-btn').forEach(btn => btn.classList.remove('active'));
+ this.classList.add('active');
+ renderScreens(parsedScreens, '2');
+ });
+
+ document.getElementById('density-3').addEventListener('click', function() {
+ document.querySelectorAll('.density-btn').forEach(btn => btn.classList.remove('active'));
+ this.classList.add('active');
+ renderScreens(parsedScreens, '3');
+ });
+
+ // Set initial active state for density buttons
+ document.getElementById('density-2').classList.add('active');
+
+ // Set initial active filter to ALL
+ document.getElementById('all-filter').classList.add('active');
+
// Set up search functionality
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', filterScreens);
@@ -226,7 +519,44 @@
filterScreens();
});
+ // Close modal
+ document.getElementById('close-modal').addEventListener('click', closeModal);
+
+ // Close modal when clicking outside
+ document.getElementById('image-modal').addEventListener('click', function(e) {
+ if (e.target === this) {
+ closeModal();
+ }
+ });
+
+ // Set up download buttons
+ document.addEventListener('click', function(e) {
+ if (e.target.classList.contains('download-btn') || e.target.closest('.download-btn')) {
+ const btn = e.target.classList.contains('download-btn') ? e.target : e.target.closest('.download-btn');
+ const filename = btn.getAttribute('data-filename');
+ // Create a temporary link to trigger download
+ const link = document.createElement('a');
+ link.href = `screens/${filename}`;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+ });
+
+ // Set up thumbnail click to open modal
+ document.addEventListener('click', function(e) {
+ if (e.target.closest('.gallery-item') && !e.target.classList.contains('download-btn')) {
+ const item = e.target.closest('.gallery-item');
+ const filename = item.getAttribute('data-filename');
+ const name = item.getAttribute('data-name');
+ const credit = item.getAttribute('data-credit');
+ openModal(filename, name, credit);
+ }
+ });
+
// Initial render
+ updateCounts(parsedScreens);
renderScreens(parsedScreens);
});