| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NezQuest - Doubles Collection</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'nes-red': '#e71d36', |
| 'nes-blue': '#2ec4b6', |
| 'nes-yellow': '#ff9f1c', |
| 'nes-dark': '#011627', |
| }, |
| fontFamily: { |
| 'press-start': ['"Press Start 2P"', 'cursive'], |
| }, |
| } |
| } |
| } |
| </script> |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> |
| <style> |
| .action-btn { |
| font-size: 8px; |
| padding: 2px 6px; |
| transition: all 0.2s; |
| line-height: 1; |
| } |
| |
| .count-badge { |
| min-width: 20px; |
| height: 20px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 10px; |
| background: #ff9f1c; |
| color: #000; |
| border-radius: 2px; |
| } |
| |
| |
| .filter-container { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.5rem; |
| justify-content: center; |
| } |
| </style> |
| </head> |
|
|
| <body class="bg-nes-dark text-white font-press-start bg-grid min-h-screen scanlines"> |
| <custom-header></custom-header> |
|
|
| <main class="container mx-auto px-4 py-8 max-w-4xl"> |
| <h1 class="text-2xl text-center mb-3 text-nes-blue">DOUBLES COLLECTION</h1> |
| <p class="text-xs text-center text-gray-400 mb-6">Games, Consoles and Accessories with multiple copies.</p> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> |
| <div |
| class="bg-black bg-opacity-90 border-4 border-nes-yellow p-4 flex flex-col justify-center items-center"> |
| <span class="text-nes-yellow text-xs mb-1">TOTAL DOUBLES</span> |
| <span id="total-doubles-count" class="text-3xl text-nes-yellow">0</span> |
| </div> |
|
|
| <div class="bg-black bg-opacity-90 border-4 border-nes-blue p-4 flex flex-col justify-center items-center"> |
| <span class="text-nes-blue text-xs mb-1">TOTAL COPIES</span> |
| <span id="total-copies-count" class="text-3xl text-nes-blue">0</span> |
| </div> |
|
|
| <div class="bg-black bg-opacity-90 border-4 border-nes-red p-4 flex flex-col justify-center items-center"> |
| <span class="text-nes-red text-xs mb-1">MOST COPIES</span> |
| <span id="most-copies-count" class="text-3xl text-nes-red">0</span> |
| </div> |
| </div> |
|
|
| <div class="mb-6 flex flex-col gap-2"> |
| <div class="filter-container"> |
| <button id="filter-all" class="px-2 py-1 text-[14px] bg-nes-blue text-white border-2 border-nes-blue rounded hover:bg-nes-dark transition-colors">ALL</button> |
| <button id="filter-ntsc" class="px-2 py-1 text-[14px] bg-black text-nes-red border-2 border-nes-red rounded hover:bg-nes-dark transition-colors">NTSC</button> |
| <button id="filter-pal" class="px-2 py-1 text-[14px] bg-black text-nes-yellow border-2 border-nes-yellow rounded hover:bg-nes-dark transition-colors">PAL</button> |
| <button id="filter-unlicensed" class="px-2 py-1 text-[14px] bg-black text-purple-300 border-2 border-purple-300 rounded hover:bg-purple-900 transition-colors">UNLICENSED</button> |
| <button id="filter-homebrew" class="px-2 py-1 text-[14px] bg-black text-green-300 border-2 border-green-300 rounded hover:bg-green-900 transition-colors">HOMEBREW</button> |
| <button id="filter-reproduction" class="px-2 py-1 text-[14px] bg-black text-pink-300 border-2 border-pink-300 rounded hover:bg-pink-900 transition-colors">REPRODUCTION</button> |
| <button id="filter-bootleg" class="px-2 py-1 text-[14px] bg-black text-orange-300 border-2 border-orange-300 rounded hover:bg-orange-900 transition-colors">BOOTLEG</button> |
| </div> |
|
|
| <div class="flex flex-col sm:flex-row gap-4 justify-left items-center w-full"> |
| <input type="text" id="search" placeholder="Search doubles..." class="px-4 py-2 bg-black text-white border-2 border-nes-blue rounded w-full max-w"> |
| </div> |
| </div> |
|
|
| <div class="bg-black bg-opacity-60 border-2 border-gray-700 p-4 mb-4"> |
| <div id="doubles-list" class="grid grid-cols-1 gap-2"> |
| </div> |
| </div> |
|
|
| <div class="mt-8 text-center"> |
| <a href="index.html" |
| class="inline-block px-6 py-3 bg-nes-yellow text-black border-4 border-nes-yellow hover:bg-nes-dark hover:text-nes-yellow transition-colors text-xs">BACK |
| TO COLLECTION</a> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script> |
| feather.replace(); |
| |
| |
| |
| |
| const doublesData = [ |
| { id: 1, title: "Super Mario Bros.", year: 1985, region: "NTSC", count: 3 }, |
| { id: 2, title: "The Legend of Zelda", year: 1987, region: "NTSC", count: 2 }, |
| { id: 3, title: "Duck Hunt", year: 1985, region: "PAL", count: 4 }, |
| { id: 4, title: "Metroid", year: 1987, region: "NTSC", count: 2 }, |
| { id: 4, title: "Metroid-X", year: 1987, region: "UNLICENSED", count: 2 }, |
| { id: 5, title: "Castlevania", year: 1987, region: "NTSC", count: 2 }, |
| { id: 6, title: "Super Mario Bros. 3", year: 1990, region: "NTSC", count: 2 } |
| ]; |
| |
| let currentFilter = 'all'; |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| renderDoubles(); |
| setupEventListeners(); |
| }); |
| |
| function setupEventListeners() { |
| const filters = ['all', 'ntsc', 'pal', 'unlicensed', 'homebrew', 'reproduction', 'bootleg', 'console', 'accessory']; |
| filters.forEach(f => { |
| const btn = document.getElementById(`filter-${f}`); |
| if (btn) btn.addEventListener('click', () => setFilter(f)); |
| }); |
| |
| document.getElementById('search').addEventListener('input', (e) => { |
| renderDoubles(e.target.value); |
| }); |
| } |
| |
| function setFilter(filter) { |
| currentFilter = filter; |
| renderDoubles(); |
| } |
| |
| function renderDoubles(searchTerm = '') { |
| const list = document.getElementById('doubles-list'); |
| if (!list) return; |
| |
| list.innerHTML = ''; |
| |
| let filtered = doublesData.filter(game => { |
| const matchesSearch = game.title.toLowerCase().includes(searchTerm.toLowerCase()); |
| if (!matchesSearch) return false; |
| |
| if (currentFilter === 'all') return true; |
| return game.region.toLowerCase() === currentFilter.toLowerCase(); |
| }); |
| |
| if (filtered.length === 0) { |
| list.innerHTML = '<div class="text-center text-gray-500 py-8 text-xs">No doubles found</div>'; |
| updateStats(0, 0, 0); |
| return; |
| } |
| |
| filtered.sort((a, b) => b.count - a.count || a.title.localeCompare(b.title)); |
| |
| filtered.forEach(game => { |
| const item = document.createElement('div'); |
| item.className = `flex justify-between items-center p-3 border-2 ${game.region === 'NTSC' ? 'border-nes-red' : 'border-nes-yellow'} rounded hover:bg-black hover:bg-opacity-30 transition-colors`; |
| |
| item.innerHTML = ` |
| <div class="flex items-center gap-3"> |
| <span class="count-badge">${game.count}</span> |
| <div> |
| <div class="text-sm ${game.region === 'NTSC' ? 'text-nes-red' : 'text-nes-yellow'}">${game.title}</div> |
| <div class="text-xs text-gray-500">${game.year} • ${game.region}</div> |
| </div> |
| </div> |
| `; |
| list.appendChild(item); |
| }); |
| |
| const totalDoubles = doublesData.length; |
| const totalCopies = doublesData.reduce((sum, g) => sum + g.count, 0); |
| const mostCopies = Math.max(...doublesData.map(g => g.count)); |
| updateStats(totalDoubles, totalCopies, mostCopies); |
| } |
| |
| function updateStats(total, copies, max) { |
| document.getElementById('total-doubles-count').textContent = total; |
| document.getElementById('total-copies-count').textContent = copies; |
| document.getElementById('most-copies-count').textContent = max; |
| } |
| </script> |
| </body> |
|
|
| </html> |
