let html = ''; for (const rom of romArray) const sizeStr = formatBytes(rom.size); const icon = rom.extension === 'gba' ? '🎮' : (rom.extension === 'gb' ? '🕹️' : '🔘'); html += ` <div class="rom-card" data-id="$rom.id"> <div class="rom-header"> <div class="rom-icon">$icon</div> <div class="rom-name">$escapeHtml(rom.name)</div> </div> <div class="rom-meta"> <span class="badge-gba">$rom.extension.toUpperCase()</span> <span class="rom-size">$sizeStr</span> </div> </div> `;
// 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 );
<!-- 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>
);
function closeModal() modal.style.display = 'none'; currentModalRom = null;
// modal close closeModalBtn.addEventListener('click', closeModal); window.addEventListener('click', (e) => if (e.target === modal) closeModal(); );
.stats-panel background: #1a1f2bdd; backdrop-filter: blur(8px); padding: 0.6rem 1.4rem; border-radius: 48px; border: 1px solid #2e3a4e; font-size: 0.9rem; font-weight: 500; display: flex; gap: 1.5rem;
button background: #FFB347; border: none; padding: 8px 16px; border-radius: 40px; font-weight: bold; cursor: pointer;