Replace emojis with SVG icons, convert browser dropdown to grid, and open emulator in new window

[Copilot]

Modernizes the UI by replacing emoji icons with SVG, implementing grid-based browser selection, and opening the emulator in a separate window instead of inline on the settings page.

Changes

SVG Icons

• Replaced emoji characters (🌐, 💾, 🎮, ▶️) with inline SVG icons
• Added aria-hidden="true" for accessibility
• Ensures consistent rendering across platforms

Grid Browser Selection

• Converted dropdown to 3-column visual grid with clickable cards
• Selection indicated by green border highlight
• Responsive: single column on mobile

// Browser selection now handled via grid click events
function setupBrowserGrid() {
    const browserOptions = document.querySelectorAll('.browser-option');
    browserOptions.forEach(option => {
        option.addEventListener('click', () => {
            browserOptions.forEach(opt => opt.classList.remove('selected'));
            option.classList.add('selected');
        });
    });
}

Separate Emulator Window

• Created dedicated emulator.html page
• Configuration passed via URL parameters
• Settings page remains accessible while emulator runs

// Opens in new window with config
const params = new URLSearchParams({ browser, ram, vram, id: emulatorId });
window.open(`emulator.html?${params.toString()}`, '_blank');

Code Quality

• Removed unused CSS rules
• Added --error-color CSS variable for consistency
• Replaced hard-coded colors with theme variables

Screenshots

Grid Browser Selection

Selected State

Emulator in Separate Window

Original prompt

update the ui to use actual icons instead of emojis, make the browser selection a grid select instead of a drop down, and make it so the emulator starts in a new page instead of on the hompage/settings page

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.