| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NezQuest - NES Map Tracker</title> |
| <link rel="stylesheet" href="style.css"> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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> |
| #map { |
| height: 60vh; |
| border: 4px solid #2ec4b6; |
| background-color: #011627; |
| } |
| |
| .leaflet-popup-content-wrapper { |
| background-color: #011627 !important; |
| color: #ff9f1c !important; |
| border: 2px solid #e71d36 !important; |
| border-radius: 0 !important; |
| font-family: 'Press Start 2P', cursive !important; |
| font-size: 10px !important; |
| } |
| |
| .leaflet-popup-tip { |
| background-color: #e71d36 !important; |
| } |
| |
| .leaflet-container a { |
| color: #2ec4b6 !important; |
| } |
| |
| .leaflet-container { |
| background: #011627 !important; |
| } |
| </style> |
| </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"> |
| <header class="mb-1 text-center"> |
| <h1 class="text-2xl md:text-3xl font-bold text-grey-400 mb-2">NES MAP TRACKER</h1> |
| <p class="text-green-400 max-w-2xl mx-auto text-xs">SEE WHERE THE NES COMES FROM!</p> |
| </header> |
| <div id="map" class="mb-6 shadow-lg"></div> |
|
|
| <div class="bg-gray-800 p-6 border-4 border-purple-800"> |
| <h2 class="text-lg font-semibold text-yellow-400 mb-4">NES Recently Acquired LOCATIONS</h2> |
| <div id="pins-list" class="space-y-3"> |
| |
| </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="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const map = L.map('map').setView([20, 0], 2); |
| |
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| |
| const locations = [ |
| { lat: 35.6762, lng: 139.6503, message: "Nintendo HQ - Tokyo, Japan", type: "NTSC" }, |
| { lat: 34.0522, lng: -118.2437, message: "Capcom USA - Los Angeles", type: "NTSC" }, |
| { lat: 51.5074, lng: -0.1278, message: "Ocean Software - London, UK", type: "PAL" }, |
| { lat: 40.7128, lng: -74.0060, message: "Acclaim - New York, USA", type: "NTSC" }, |
| { lat: 37.7749, lng: -122.4194, message: "Sunsoft - San Francisco", type: "NTSC" } |
| ]; |
| |
| const pinsList = document.getElementById('pins-list'); |
| |
| |
| function addMarker(lat, lng, message, type) { |
| const color = type === 'NTSC' ? '#e71d36' : type === 'PAL' ? '#ff9f1c' : '#2ec4b6'; |
| |
| const marker = L.marker([lat, lng]).addTo(map) |
| .bindPopup(`<div class="p-2"><strong style="color:${color}">${message}</strong><br><span style="color:#2ec4b6">${type}</span></div>`); |
| |
| |
| const pinItem = document.createElement('div'); |
| pinItem.className = `flex items-center p-3 bg-black bg-opacity-60 border-2 cursor-pointer hover:bg-opacity-80 transition-colors`; |
| pinItem.style.borderColor = color; |
| pinItem.innerHTML = ` |
| <div class="flex-1"> |
| <span class="font-medium text-xs" style="color:${color}">${message}</span> |
| <div class="text-xxs text-gray-500 mt-1">${lat.toFixed(4)}, ${lng.toFixed(4)}</div> |
| </div> |
| `; |
| pinsList.appendChild(pinItem); |
| |
| |
| pinItem.addEventListener('click', () => { |
| map.setView([lat, lng], 10); |
| marker.openPopup(); |
| }); |
| } |
| |
| |
| locations.forEach(loc => { |
| addMarker(loc.lat, loc.lng, loc.message, loc.type); |
| }); |
| }); |
| </script> |
| </body> |
|
|
| </html> |
