.repo-name font-size: 1.6rem; font-weight: 600; background: linear-gradient(135deg, #f0f6fc, #8b949e); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px;
.close-modal background: none; border: none; color: #c9d1d9; font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0 0.5rem; transition: 0.2s;
<!-- tabs: all games & favorites (simple dynamic) --> <div class="tabs"> <button class="tab active" data-tab="all">🎲 All games</button> <button class="tab" data-tab="favs">❤️ Favorites</button> </div> unblocked games.github
gamesContainer.innerHTML = gamesToShow.map(game => const isFav = favorites.has(game.id); return ` <div class="game-card" data-game-id="$game.id"> <div class="game-thumb" style="font-size:3.5rem;">$game.thumb</div> <div class="game-info"> <div class="game-title"> $escapeHtml(game.title) <button class="fav-btn" data-id="$game.id" style="background:none; border:none; font-size:1.2rem; cursor:pointer; color:$isFav ? '#f78166' : '#6e7681'; transition:0.1s;">$isFav ? '❤️' : '🤍'</button> </div> <div class="game-desc">$escapeHtml(game.desc)</div> <div class="game-tags"> $game.tags.map(tag => `<span class="tag">#$escapeHtml(tag)</span>`).join('') </div> </div> </div> `; ).join('');
<!-- search & filter --> <div class="search-area"> <input type="text" id="searchInput" class="search-box" placeholder="Search game... e.g., snake, tetris"> </div> meta name="viewport" content="width=device-width
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Unblocked Games Hub · GitHub Classics</title> <style> * margin: 0; padding: 0; box-sizing: border-box; body background: #0d1117; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; color: #c9d1d9; line-height: 1.5; padding: 2rem 1rem;
.game-frame flex: 1; width: 100%; border: none; background: #fff; Unblocked Games Hub · GitHub Classics<
/* game grid */ .games-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem;