// search + sort listeners searchInput.addEventListener('input', () => applyFiltersAndSort()); sortSelect.addEventListener('change', () => applyFiltersAndSort());
.modal-content background: #1b212f; border-radius: 32px; max-width: 550px; width: 90%; padding: 1.8rem; border: 1px solid #FFB347; box-shadow: 0 25px 40px rgba(0,0,0,0.5);
<!-- ZIP upload --> <div class="upload-zone" id="uploadZone"> <div class="upload-icon">🗂️📀</div> <div><strong>Drop or click to upload your GBA ROM collection ZIP</strong></div> <div style="font-size:0.75rem; margin-top: 6px;">Supports .zip files containing .gba, .zip within (nested ignored), .gb, .gba roms</div> <input type="file" id="fileInput" accept=".zip" style="display: none;" /> <button class="upload-btn" id="triggerUpload">📂 SELECT ZIP ARCHIVE</button> <div class="file-info" id="fileStatus">No archive loaded — upload a zip with GBA roms</div> </div> gba rom collection zip
let currentModalRom = null; // stores rom entry for download
);
const sortVal = sortSelect.value; if (sortVal === 'name-asc') result.sort((a,b) => a.name.localeCompare(b.name)); else if (sortVal === 'name-desc') result.sort((a,b) => b.name.localeCompare(a.name)); else if (sortVal === 'size-asc') result.sort((a,b) => a.size - b.size); else if (sortVal === 'size-desc') result.sort((a,b) => b.size - a.size);
// DOM elements const uploadZone = document.getElementById('uploadZone'); const fileInput = document.getElementById('fileInput'); const triggerBtn = document.getElementById('triggerUpload'); const fileStatusSpan = document.getElementById('fileStatus'); const romCountSpan = document.getElementById('romCount'); const romGridContainer = document.getElementById('romGridContainer'); const toolbarSection = document.getElementById('toolbarSection'); const searchInput = document.getElementById('searchInput'); const sortSelect = document.getElementById('sortSelect'); const modal = document.getElementById('romModal'); const closeModalBtn = document.getElementById('closeModalBtn'); const modalTitleSpan = document.getElementById('modalTitle'); const modalFilenameSpan = document.getElementById('modalFilename'); const modalSizeSpan = document.getElementById('modalSize'); const modalTypeSpan = document.getElementById('modalType'); const extractSingleBtn = document.getElementById('extractSingleBtn'); // search + sort listeners searchInput
// initial load demo message console.log('GBA ROM Explorer ready — upload your GBA collection zip'); </script> </body> </html>
// trigger hidden input triggerBtn.addEventListener('click', () => fileInput.click()); uploadZone.addEventListener('click', (e) => ); fileInput.addEventListener('change', (e) => if (e.target.files.length) handleZipFile(e.target.files[0]); fileInput.value = ''; // allow re-upload same file ); .modal-content background: #1b212f
.rom-card background: #121724dd; backdrop-filter: blur(4px); border-radius: 24px; border: 1px solid #2d374e; padding: 1rem 1.2rem 1rem 1.2rem; transition: transform 0.15s ease, box-shadow 0.2s; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); cursor: pointer;