| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NezQuest - Adapters & Tools</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"> |
| </head> |
|
|
| <body class="bg-nes-dark text-white font-press-start bg-grid min-h-screen scanlines"> |
| <custom-header></custom-header> |
| <div id="login-modal" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden"> |
| <div class="bg-nes-dark p-6 rounded-lg border-4 border-nes-yellow max-w-md w-full"> |
| <h2 class="text-nes-yellow text-xl mb-4 text-center">Admin Login</h2> |
| <input type="password" id="login-password" placeholder="Password" class="w-full p-2 mb-4 bg-black text-white border-2 border-nes-blue rounded"> |
| <button id="login-button" class="w-full p-2 bg-nes-red text-white rounded hover:bg-red-700">Login</button> |
| </div> |
| </div> |
|
|
| <main class="container mx-auto px-4 py-8 max-w-4xl"> |
| <h1 class="text-2xl text-center mb-3 text-lime-600">Adapters & Tools</h1> |
| <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"> |
| <h2 class="text-nes-yellow text-center text-xs mb-3">PROGRESS</h2> |
| <div class="w-full bg-gray-800 h-6 border-2 border-gray-700"> |
| <div id="adapters-progress-bar" class="glitter-bar h-full transition-all duration-500" |
| style="width: 0%; background: linear-gradient(90deg, #e71d36, #ad46ff, #ff9f1c, #2ec4b6, #7ccf00, #ff9f1c, #e71d36); background-size: 200% 100%; animation: glitter 2s linear infinite;"> |
| </div> |
| </div> |
| <p id="adapters-progress" class="text-center text-xs mt-2 text-nes-yellow">0%</p> |
| </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">OWNED</span> |
| <span id="adapters-owned-count" class="text-2xl 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">MISSING</span> |
| <span id="adapters-missing-count" class="text-2xl text-nes-red">0</span> |
| </div> |
| </div> |
| <div class="mb-4 flex flex-col sm:flex-row justify-between items-center gap-2"> |
| <div class="flex gap-2"> |
| <button id="filter-all" class="px-3 py-1 bg-nes-blue text-white border-2 border-nes-blue rounded hover:bg-nes-dark transition-colors filter-btn" data-filter="all"> |
| ALL |
| </button> |
| <button id="filter-owned" class="px-3 py-1 bg-black text-nes-yellow border-2 border-nes-yellow rounded hover:bg-nes-dark transition-colors filter-btn" data-filter="owned"> |
| OWNED |
| </button> |
| <button id="filter-missing" class="px-3 py-1 bg-black text-nes-red border-2 border-nes-red rounded hover:bg-nes-dark transition-colors filter-btn" data-filter="missing"> |
| MISSING |
| </button> |
| </div> |
| <div class="flex gap-2 items-center"> |
| <a href="stats.html" |
| class="px-3 py-1 bg-nes-yellow text-black border-2 border-nes-yellow rounded hover:bg-nes-dark hover:text-nes-yellow transition-colors text-xs font-bold"> |
| STATS |
| </a> |
| <input type="text" id="search" placeholder="Search adapters..." class="px-3 py-1 bg-black text-white border-2 border-nes-blue rounded"> |
| </div> |
| </div> |
| |
| |
| <div class="mb-4"> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2"> |
| <button id="filter-type-all" class="px-2 py-1 bg-black text-lime-600 border-2 border-lime-600 rounded hover:bg-lime-950 transition-colors text-xs text-center type-filter-btn" data-type="All Types"> |
| ALL TYPES |
| </button> |
| <button id="filter-type-adapter" class="px-2 py-1 bg-black text-lime-600 border-2 border-lime-600 rounded hover:bg-lime-950 transition-colors text-xs text-center type-filter-btn" data-type="Adapter"> |
| ADAPTERS |
| </button> |
| <button id="filter-type-gamegenie" class="px-2 py-1 bg-black text-lime-600 border-2 border-lime-600 rounded hover:bg-lime-950 transition-colors text-xs text-center type-filter-btn" data-type="Game Genie"> |
| GAME GENIE |
| </button> |
| <button id="filter-type-cleaner" class="px-2 py-1 bg-black text-lime-600 border-2 border-lime-600 rounded hover:bg-lime-950 transition-colors text-xs text-center type-filter-btn" data-type="Cleaner"> |
| CLEANERS |
| </button> |
| <button id="filter-type-tool" class="px-2 py-1 bg-black text-lime-600 border-2 border-lime-600 rounded hover:bg-lime-950 transition-colors text-xs text-center type-filter-btn" data-type="Tool"> |
| TOOLS |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 gap-2"> |
|
|
| <div class="bg-black bg-opacity-60 border-2 border-gray-700 p-4 mb-4"> |
| <div class="flex justify-between items-center mb-3 text-xs"> |
| <span class="text-nes-blue">ITEM NAME</span> |
| <span class="text-nes-yellow">STATUS</span> |
| </div> |
| <div id="games-list" class="grid grid-cols-1 gap-1"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
| |
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| |
| </html> |
