// Close modal via button or outside click document.getElementById('closeModalBtn').addEventListener('click', closeModal); window.addEventListener('click', (e) => if (e.target === modal) closeModal(); );
function closeModal() modal.style.display = 'none';
/* header with ghostware identity */ .brand display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; border-bottom: 2px solid #2c5f8a; padding-bottom: 0.75rem; margin-bottom: 2rem; wiiware collection by ghostware
.game-dev font-size: 0.7rem; color: #7f9fc9; text-transform: uppercase; font-family: monospace;
.close-modal background: #1f3f5c; border: none; padding: 0.6rem 1.5rem; border-radius: 40px; color: white; font-weight: bold; margin-top: 1rem; cursor: pointer; font-family: monospace; // Close modal via button or outside click document
<div class="collection-container"> <div class="brand"> <h1>👻 WIIWARE COLLECTION</h1> <div class="ghost-tag">by GHOSTWARE ⚡</div> </div> <div class="sub"> <span>📀 12 forgotten classics • 2008–2012 revival</span> <span>🎮 Wii Remote compatible • Ghostware archives</span> </div>
footer text-align: center; margin-top: 2rem; font-size: 0.7rem; color: #42688b; </style> </head> <body> if (e.target === modal) closeModal()
function buildCards() gameGrid.innerHTML = ''; wiiwareGames.forEach(game => const card = document.createElement('div'); card.className = 'game-card'; card.setAttribute('data-id', game.id); card.innerHTML = ` <div class="game-icon">$game.icon</div> <div class="game-title">$game.title</div> <div class="game-dev">GHOSTWARE · $game.genre</div> <div class="size-badge">📦 $game.size</div> `; card.addEventListener('click', () => openModal(game.id)); gameGrid.appendChild(card); );