Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PokéDexScreener | Top 100 Cards</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| pokeblue: '#3B4CCA', | |
| pokered: '#FF0000', | |
| pokeyellow: '#FFDE00', | |
| dexgreen: '#00ff5f', | |
| dexred: '#ff2e63', | |
| dexorange: '#ff9f43', | |
| dexpurple: '#a55eea', | |
| dexblue: '#58a6ff', | |
| dexpink: '#ff6b9d', | |
| dexcyan: '#00d4ff', | |
| }, | |
| fontFamily: { | |
| 'sans': ['Inter', 'sans-serif'], | |
| 'mono': ['Fira Code', 'monospace'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); | |
| body { | |
| background-color: #0a0a0a; | |
| color: #e5e5e5; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .terminal-font { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .blink { | |
| animation: blink-animation 1s steps(5, start) infinite; | |
| } | |
| @keyframes blink-animation { | |
| to { | |
| visibility: hidden; | |
| } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .price-up { | |
| color: #00ff5f; | |
| } | |
| .price-down { | |
| color: #ff2e63; | |
| } | |
| .price-neutral { | |
| color: #94a3b8; | |
| } | |
| .glow { | |
| box-shadow: 0 0 10px rgba(59, 76, 202, 0.5); | |
| } | |
| .dex-bg { | |
| background-color: #0d1117; | |
| } | |
| .dex-card { | |
| background-color: #161b22; | |
| border: 1px solid #30363d; | |
| } | |
| .dex-input { | |
| background-color: #0d1117; | |
| border: 1px solid #30363d; | |
| color: #c9d1d9; | |
| } | |
| .dex-input:focus { | |
| outline: none; | |
| border-color: #58a6ff; | |
| } | |
| .dex-tab { | |
| border-bottom: 2px solid transparent; | |
| } | |
| .dex-tab.active { | |
| border-bottom-color: #58a6ff; | |
| color: #58a6ff; | |
| } | |
| .dex-divider { | |
| border-color: #30363d; | |
| } | |
| .dex-hover:hover { | |
| background-color: #1f2937; | |
| } | |
| .dex-pill { | |
| background-color: #238636; | |
| color: white; | |
| } | |
| .trend-up { | |
| background: linear-gradient(90deg, rgba(0,255,95,0.1) 0%, rgba(0,255,95,0) 100%); | |
| } | |
| .trend-down { | |
| background: linear-gradient(90deg, rgba(255,46,99,0.1) 0%, rgba(255,46,99,0) 100%); | |
| } | |
| .card-image { | |
| width: 100px; | |
| height: 140px; | |
| object-fit: contain; | |
| border-radius: 8px; | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .rank-badge { | |
| width: 28px; | |
| height: 28px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .rank-1 { | |
| background-color: #ffd700; | |
| color: #000; | |
| } | |
| .rank-2 { | |
| background-color: #c0c0c0; | |
| color: #000; | |
| } | |
| .rank-3 { | |
| background-color: #cd7f32; | |
| color: #000; | |
| } | |
| .rank-other { | |
| background-color: #30363d; | |
| color: #8b949e; | |
| } | |
| .era-tag { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| } | |
| .wotc-era { background-color: #3B4CCA; color: white; } | |
| .ex-era { background-color: #FF0000; color: white; } | |
| .dp-era { background-color: #FFDE00; color: black; } | |
| .bw-era { background-color: #00ff5f; color: black; } | |
| .xy-era { background-color: #ff9f43; color: black; } | |
| .sm-era { background-color: #a55eea; color: white; } | |
| .swsh-era { background-color: #58a6ff; color: black; } | |
| .sv-era { background-color: #ff6b9d; color: black; } | |
| .future-era { background-color: #00d4ff; color: black; } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #161b22; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 8px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| border: 1px solid #30363d; | |
| font-size: 12px; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .pagination-btn { | |
| background-color: #161b22; | |
| border: 1px solid #30363d; | |
| color: #c9d1d9; | |
| padding: 6px 12px; | |
| margin: 0 2px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .pagination-btn:hover { | |
| background-color: #1f2937; | |
| border-color: #58a6ff; | |
| } | |
| .pagination-btn.active { | |
| background-color: #58a6ff; | |
| color: white; | |
| border-color: #58a6ff; | |
| } | |
| .pagination-btn.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .price-tooltip { | |
| position: absolute; | |
| background: #161b22; | |
| border: 1px solid #30363d; | |
| padding: 8px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| z-index: 10; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| width: 300px; | |
| } | |
| .price-cell:hover .price-tooltip { | |
| opacity: 1; | |
| } | |
| .price-history { | |
| margin-top: 4px; | |
| font-size: 11px; | |
| color: #8b949e; | |
| } | |
| .price-history div { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 2px; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff9f43, #ff6b9d, #58a6ff); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-border { | |
| border: 1px solid transparent; | |
| background: linear-gradient(#0d1117, #0d1117) padding-box, | |
| linear-gradient(90deg, #ff9f43, #ff6b9d, #58a6ff) border-box; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen dex-bg"> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="p-4 border-b border-gray-800"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-pokered flex items-center justify-center mr-2"> | |
| <div class="w-6 h-6 rounded-full bg-white flex items-center justify-center"> | |
| <div class="w-3 h-3 rounded-full bg-pokeblue"></div> | |
| </div> | |
| </div> | |
| <h1 class="text-xl font-bold text-white">Poké<span class="text-dexgreen">Dex</span>Screener</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white">Dashboard</a> | |
| <a href="#" class="text-white hover:text-pokeyellow">Cards</a> | |
| <a href="sets.html" class="text-gray-400 hover:text-white">Sets</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Portfolio</a> | |
| <a href="#" class="text-gray-400 hover:text-white">Watchlist</a> | |
| </nav> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search Pokémon cards..." class="dex-input px-4 py-2 rounded-md text-sm w-64 focus:outline-none"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-gray-500"></i> | |
| </div> | |
| <button class="bg-dexgreen hover:bg-green-600 text-black px-4 py-2 rounded-md text-sm font-medium terminal-font"> | |
| CONNECT | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-auto"> | |
| <div class="p-6"> | |
| <!-- Cards Overview Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold text-white">Top 100 Pokémon Cards</h1> | |
| <p class="text-gray-400 mt-1">Ranked by last sold price • Updated every 15 minutes</p> | |
| </div> | |
| <div class="flex space-x-2 mt-4 md:mt-0"> | |
| <div class="relative"> | |
| <select id="eraFilter" class="dex-input px-4 py-2 pr-8 rounded-md text-sm appearance-none focus:outline-none"> | |
| <option value="all">All Eras</option> | |
| <option value="wotc">WOTC Era (1996-2003)</option> | |
| <option value="ex">EX Era (2003-2007)</option> | |
| <option value="dp">DP/HGSS Era (2007-2010)</option> | |
| <option value="bw">BW Era (2010-2013)</option> | |
| <option value="xy">XY Era (2013-2016)</option> | |
| <option value="sm">SM Era (2016-2019)</option> | |
| <option value="swsh">SWSH Era (2019-2022)</option> | |
| <option value="sv">SV Era (2022-Present)</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-2.5 text-gray-500 pointer-events-none"></i> | |
| </div> | |
| <div class="relative"> | |
| <select id="sortFilter" class="dex-input px-4 py-2 pr-8 rounded-md text-sm appearance-none focus:outline-none"> | |
| <option value="price">Sort by: Last Sold Price</option> | |
| <option value="marketcap">Sort by: Market Cap</option> | |
| <option value="volume">Sort by: 24h Volume</option> | |
| <option value="change">Sort by: 7d Change</option> | |
| <option value="rarity">Sort by: Rarity</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-2.5 text-gray-500 pointer-events-none"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Overview --> | |
| <div class="dex-card rounded-lg p-6 mb-6 gradient-border"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div class="p-4 rounded-lg trend-up"> | |
| <p class="text-sm text-gray-400 mb-1">Total Market Cap</p> | |
| <p class="text-2xl font-bold text-white">$3.82B</p> | |
| <p class="text-sm price-up mt-1"><i class="fas fa-arrow-up mr-1"></i> +3.2% (24h)</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <p class="text-sm text-gray-400 mb-1">24h Volume</p> | |
| <p class="text-2xl font-bold text-white">$18.7M</p> | |
| <p class="text-sm price-up mt-1"><i class="fas fa-arrow-up mr-1"></i> +15.8%</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <p class="text-sm text-gray-400 mb-1">Total Cards Tracked</p> | |
| <p class="text-2xl font-bold text-white">24,519</p> | |
| <p class="text-sm price-neutral mt-1">Across 142 sets</p> | |
| </div> | |
| <div class="p-4 rounded-lg"> | |
| <p class="text-sm text-gray-400 mb-1">Top Card Price</p> | |
| <p class="text-2xl font-bold gradient-text">$420,000</p> | |
| <p class="text-sm price-neutral mt-1">PSA 10 Charizard 1st Ed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cards Table --> | |
| <div class="dex-card rounded-lg overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y dex-divider"> | |
| <thead class="bg-gray-900"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Rank</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Card</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Set</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Last Sold</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">7d Change</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">30d Change</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Rarity</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Graded</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y dex-divider" id="cardsTableBody"> | |
| <!-- 1st Edition Charizard --> | |
| <tr class="dex-hover" data-era="wotc"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="rank-badge rank-1">1</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/base1/4_hires.png" alt="Charizard" class="card-image mr-4"> | |
| <div> | |
| <div class="text-sm font-medium text-white">Charizard</div> | |
| <div class="text-xs text-gray-400">#4 • Base Set 1st Edition</div> | |
| <span class="era-tag wotc-era">WOTC Era</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/base1/logo.png" alt="Base Set" class="w-8 h-8 rounded mr-2"> | |
| <div> | |
| <div class="text-xs font-medium text-white">Base Set</div> | |
| <div class="text-xs text-gray-400">1999 • 102 cards</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap relative price-cell"> | |
| <div class="text-sm font-medium text-white">$420,000</div> | |
| <div class="price-tooltip"> | |
| <div>Last Sale Details:</div> | |
| <div class="price-history"> | |
| <div><span>Date:</span> <span>2023-07-15</span></div> | |
| <div><span>Platform:</span> <span>Private Sale</span></div> | |
| <div><span>Grade:</span> <span>PSA 10</span></div> | |
| <div><span>Previous:</span> <span>$375,000</span></div> | |
| <div><span>Change:</span> <span class="price-up">+12.0%</span></div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-up">+5.2%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-up">+12.0%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-500 text-black font-bold">Holo Rare</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white">PSA 10</td> | |
| </tr> | |
| <!-- Pikachu Illustrator --> | |
| <tr class="dex-hover" data-era="wotc"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="rank-badge rank-2">2</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/xy8/124_hires.png" alt="Pikachu Illustrator" class="card-image mr-4"> | |
| <div> | |
| <div class="text-sm font-medium text-white">Pikachu Illustrator</div> | |
| <div class="text-xs text-gray-400">#124 • Pokémon Snap Contest</div> | |
| <span class="era-tag wotc-era">WOTC Era</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/xy8/logo.png" alt="Pokémon Snap Contest" class="w-8 h-8 rounded mr-2"> | |
| <div> | |
| <div class="text-xs font-medium text-white">Pokémon Snap Contest</div> | |
| <div class="text-xs text-gray-400">1998 • 5 cards</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap relative price-cell"> | |
| <div class="text-sm font-medium text-white">$375,000</div> | |
| <div class="price-tooltip"> | |
| <div>Last Sale Details:</div> | |
| <div class="price-history"> | |
| <div><span>Date:</span> <span>2023-06-22</span></div> | |
| <div><span>Platform:</span> <span>Heritage Auctions</span></div> | |
| <div><span>Grade:</span> <span>PSA 9</span></div> | |
| <div><span>Previous:</span> <span>$390,000</span></div> | |
| <div><span>Change:</span> <span class="price-down">-3.8%</span></div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-down">-1.3%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-down">-3.8%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-purple-500 text-white font-bold">Promo</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white">PSA 9</td> | |
| </tr> | |
| <!-- Blastoise 1st Edition --> | |
| <tr class="dex-hover" data-era="wotc"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="rank-badge rank-3">3</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/base1/2_hires.png" alt="Blastoise" class="card-image mr-4"> | |
| <div> | |
| <div class="text-sm font-medium text-white">Blastoise</div> | |
| <div class="text-xs text-gray-400">#2 • Base Set 1st Edition</div> | |
| <span class="era-tag wotc-era">WOTC Era</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <img src="https://images.pokemontcg.io/base1/logo.png" alt="Base Set" class="w-8 h-8 rounded mr-2"> | |
| <div> | |
| <div class="text-xs font-medium text-white">Base Set</div> | |
| <div class="text-xs text-gray-400">1999 • 102 cards</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap relative price-cell"> | |
| <div class="text-sm font-medium text-white">$360,000</div> | |
| <div class="price-tooltip"> | |
| <div>Last Sale Details:</div> | |
| <div class="price-history"> | |
| <div><span>Date:</span> <span>2023-07-10</span></div> | |
| <div><span>Platform:</span> <span>Goldin Auctions</span></div> | |
| <div><span>Grade:</span> <span>PSA 10</span></div> | |
| <div><span>Previous:</span> <span>$340,000</span></div> | |
| <div><span>Change:</span> <span class="price-up">+5.9%</span></div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-up">+2.8%</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm price-up">+5.9%</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-500 text-black font-bold">Holo Rare</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-white">PSA 10</td> | |
| </tr> | |
| <!-- Venusaur 1st Edition --> | |
| <tr class="dex-hover" data-era="wotc"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="rank-badge rank-other">4</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| 极速赛车 | |
| </html> |