<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>European Pixel League 2026</title> <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Press+Start+2P&display=swap"
        rel="stylesheet"> <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
    <style>
        :root {
            --bg-dark: #0a0a12;
            --bg-card: rgba(255, 255, 255, 0.05);
            --accent-neon: #00f2ff;
            --accent-pixel: #ff00ea;
            --text-main: #e0e0e0;
            --text-dim: #a0a0a0;
            --pixel-font: 'Press Start 2P', cursive;
            --main-font: 'Inter', sans-serif;
            --neon-glow: 0 0 10px rgba(0, 242, 255, 0.5), 0 0 20px rgba(0, 242, 255, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: var(--main-font);
            line-height: 1.6;
            overflow-x: hidden;
        }

        nav {
            background: rgba(10, 10, 18, 0.98);
            border-bottom: 2px solid var(--accent-neon);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 10000;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-text {
            font-family: var(--pixel-font);
            color: white;
            text-decoration: none;
            font-size: 1rem;
        }

        .logo-text span {
            color: var(--accent-neon);
        }

        .lang-btn {
            background: none;
            border: 1px solid var(--text-dim);
            color: var(--text-dim);
            padding: 0.3rem 0.6rem;
            cursor: pointer;
            font-size: 0.7rem;
            border-radius: 4px;
            margin-left: 5px;
        }

        .lang-btn.active {
            border-color: var(--accent-neon);
            color: var(--accent-neon);
            box-shadow: var(--neon-glow);
        }

        .hero {
            text-align: center;
            padding: 6rem 1rem;
        }

        .pixel-text {
            font-family: var(--pixel-font);
            color: var(--accent-neon);
            text-shadow: 2px 2px var(--accent-pixel);
        }

        section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .glass-card {
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 3rem;
            position: relative;
        }

        #map-area {
            text-align: center;
        }

        #map-container {
            height: 550px;
            width: 100%;
            margin: 2rem 0;
            border: 3px solid var(--accent-pixel);
            border-radius: 15px;
            background: #111;
            position: relative;
            z-index: 1;
        }

        #map {
            height: 100%;
            width: 100%;
            border-radius: 12px;
        }

        #status-msg {
            font-size: 0.9rem;
            color: var(--accent-neon);
            margin-bottom: 1rem;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .feature-card {
            background: var(--bg-card);
            padding: 2.5rem;
            border-radius: 15px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .btn-main {
            display: inline-block;
            padding: 1rem 3rem;
            background: var(--accent-pixel);
            color: white;
            text-decoration: none;
            font-family: var(--pixel-font);
            border-radius: 5px;
            transition: 0.3s;
            margin-top: 1rem;
            font-size: 0.8rem;
            border: none;
            cursor: pointer;
        }

        .btn-main:hover {
            transform: scale(1.05);
            box-shadow: var(--neon-glow);
            background: var(--accent-neon);
        }

        .pixel-marker {
            width: 18px;
            height: 18px;
            background: var(--accent-neon);
            border: 2px solid white;
            box-shadow: 0 0 10px var(--accent-neon);
            border-radius: 3px;
        }

        footer {
            padding: 5rem 1rem;
            text-align: center;
            color: var(--text-dim);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 768px) {
            #map-container {
                height: 400px;
            }

            .hero h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>

<body>
    <nav>
        <div class="nav-container"> <a href="#" class="logo-text">European Pixel League <span>2026</span></a>
            <div id="langs">
                <button class="lang-btn active" data-lang="es">ES</button>
                <button class="lang-btn" data-lang="en">EN</button>
                <button class="lang-btn" data-lang="fr">FR</button>
                <button class="lang-btn" data-lang="de">DE</button>
                <button class="lang-btn" data-lang="it">IT</button>
            </div>
        </div>
    </nav>
    <header class="hero">
        <img src="public/assets/poster.jpg" alt="European Pixel League 2026 Official Poster"
            style="max-width: 100%; height: auto; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 242, 255, 0.3); margin-bottom: 2rem;">
        <h1 class="pixel-text" style="font-size: 2.8rem;" id="main-title">European Pixel League</h1>
        <p style="margin-top: 1.5rem; font-size: 1.25rem; opacity: 0.9;" id="main-subtitle">Competición Europea de
            Preservación y Retro Gaming</p>
    </header>
    <main>
        <section id="about" class="glass-card">
            <h2 class="pixel-text" style="font-size: 1.6rem; margin-bottom: 2.5rem;" id="about-title">Cargando...</h2>
            <div id="about-content" style="color:#ccc; font-size: 1.15rem; line-height: 1.8;"> <!-- Content via JS -->
            </div>
        </section>
        <section id="map-area">
            <h2 class="pixel-text" id="map-section-title">Mapa de Sedes y Sponsors</h2>
            <p id="status-msg">Iniciando mapa interactivo...</p>
            <div id="map-container">
                <div id="map"></div>
            </div>
        </section>
        <section id="features" class="features-grid"> <!-- Features via JS --> </section>
        <section id="join" style="text-align: center;">
            <div class="glass-card">
                <h2 class="pixel-text" id="join-title">¿Listo?</h2>
                <p id="join-text" style="margin: 1.5rem 0; opacity: 0.9;">Conectando asociaciones retro de toda Europa.
                </p> <a
                    href="https://docs.google.com/forms/d/e/1FAIpQLSc6qzFOcCpwC77Ac8_4IF1Fyvmyf2FTlJNLEMZ8QvV2IDPGlQ/viewform"
                    target="_blank" class="btn-main" id="join-btn">Apuntarse ahora</a>
            </div>
        </section>
    </main>
    <footer>
        <p>© 2026 Asociación El Gato de Vader | Figueres - Girona</p>
        <p>Email: europeanpixelleague@gmail.com</p>
    </footer> <!-- Leaflet JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
    <script>         const content = {
            es: {
                mainTitle: "European Pixel League",
                mainSubtitle: "Competición Europea de Preservación y Retro Gaming",
                aboutTitle: "¿Qué es la European Pixel League?",
                aboutText: `<p>¡La European Pixel League te invita a representar a tu asociación en una competición que conecta comunidades en toda Europa!</p>                             <p>Organizada por clubs y asociaciones retro, los mejores jugadores de cada sede se enfrentan en torneos presenciales hasta llegar a la gran final continental.</p>                             <p><strong>¿Por qué unirse?</strong> Lleva el nombre de tu club a nivel europeo, revive los clásicos en hardware original y forma parte de la red de preservación más grande del continente.</p>`,
                mapSectionTitle: "Mapa de Sedes y Sponsors",
                joinTitle: "¿Representas a una asociación?",
                joinText: "Inscribe a tu club y forma parte de la mayor competición retro del continente.",
                joinBtn: "Inscribir a mi Club",
                statusLoading: "Mapa interactivo oficial EPL 2026",
                features: [{ icon: "🎮", title: "Retro Purismo", text: "Hardware original y pantallas CRT para la experiencia definitiva." }, { icon: "🌍", title: "Red Europea", text: "España, Italia, Alemania, Grecia, Austria y más países unidos." }, { icon: "🤝", title: "Hermandad", text: "Conectamos asociaciones de todo el continente compartiendo pasión." }]
            },
            en: {
                mainTitle: "European Pixel League",
                mainSubtitle: "European Preservation & Retro Gaming Competition",
                aboutTitle: "What is the European Pixel League?",
                aboutText: `<p>The European Pixel League invites you to represent your association in a competition connecting communities across Europe!</p>                             <p>Organized by retro clubs, the best players from each venue compete in local tournaments to reach the grand continental final.</p>                             <p><strong>Why join?</strong> Take your club's name to the European stage, relive the classics on original hardware, and be part of the largest preservation network in Europe.</p>`,
                mapSectionTitle: "Venues & Sponsors Map",
                joinTitle: "Representing an Association?",
                joinText: "Register your club and be part of the largest retro competition on the continent.",
                joinBtn: "Register my Club",
                statusLoading: "EPL 2026 Official Interactive Map",
                features: [{ icon: "🎮", title: "Retro Purism", text: "Original hardware and CRT screens for the ultimate experience." }, { icon: "🌍", title: "European Network", text: "Spain, Italy, Germany, Greece, Austria and more countries united." }, { icon: "🤝", title: "Unity", text: "Connecting associations from across the continent sharing passion." }]
            },
            fr: {
                mainTitle: "European Pixel League",
                mainSubtitle: "Compétition Européenne de Préservation et de Rétrogaming",
                aboutTitle: "Qu'est-ce que la European Pixel League ?",
                aboutText: `<p>La European Pixel League vous invite à représenter votre association dans une compétition reliant des communautés à travers toute l'Europe !</p> <p>Organisée par des clubs et associations rétro, les meilleurs joueurs de chaque lieu s'affrontent lors de tournois en présentiel jusqu'à la grande finale continentale.</p> <p><strong>Pourquoi participer ?</strong> Portez le nom de votre club au niveau européen, revivez les classiques sur du matériel d'origine et faites partie du plus grand réseau de préservation du continent.</p>`,
                mapSectionTitle: "Carte des Lieux et Sponsors",
                joinTitle: "Vous représentez une association ?",
                joinText: "Inscrivez votre club et rejoignez la plus grande compétition rétro du continent.",
                joinBtn: "Inscrire mon Club",
                statusLoading: "Carte interactive officielle EPL 2026",
                features: [{ icon: "🎮", title: "Rétro Purisme", text: "Matériel d'origine et écrans CRT pour une expérience ultime." }, { icon: "🌍", title: "Réseau Européen", text: "Espagne, Italie, Allemagne, Grèce, Autriche et d'autres pays unis." }, { icon: "🤝", title: "Fraternité", text: "Nous connectons des associations de tout le continent partageant la même passion." }]
            },
            de: {
                mainTitle: "European Pixel League",
                mainSubtitle: "Europäischer Wettbewerb für Erhaltung und Retro-Gaming",
                aboutTitle: "Was ist die European Pixel League?",
                aboutText: `<p>Die European Pixel League lädt dich ein, deine Vereinigung in einem Wettbewerb zu vertreten, der Gemeinschaften in ganz Europa verbindet!</p> <p>Organisiert von Retro-Clubs und -Vereinigungen, treten die besten Spieler jedes Standorts in Vor-Ort-Turnieren gegeneinander an, bis sie das große kontinentale Finale erreichen.</p> <p><strong>Warum beitreten?</strong> Bringe den Namen deines Clubs auf die europäische Bühne, erlebe die Klassiker auf Original-Hardware neu und werde Teil des größten Erhaltungsnetzwerks des Kontinents.</p>`,
                mapSectionTitle: "Karte der Standorte und Sponsoren",
                joinTitle: "Vertrittst du eine Vereinigung?",
                joinText: "Melde deinen Club an und werde Teil des größten Retro-Wettbewerbs des Kontinents.",
                joinBtn: "Meinen Club anmelden",
                statusLoading: "Offizielle interaktive Karte der EPL 2026",
                features: [{ icon: "🎮", title: "Retro-Purismus", text: "Original-Hardware und CRT-Bildschirme für das ultimative Erlebnis." }, { icon: "🌍", title: "Europäisches Netzwerk", text: "Spanien, Italien, Deutschland, Griechenland, Österreich und mehr Länder vereint." }, { icon: "🤝", title: "Brüderschaft", text: "Wir verbinden Vereinigungen auf dem ganzen Kontinent, die die gleiche Leidenschaft teilen." }]
            },
            it: {
                mainTitle: "European Pixel League",
                mainSubtitle: "Competizione Europea di Preservazione e Retro Gaming",
                aboutTitle: "Cos'è la European Pixel League?",
                aboutText: `<p>La European Pixel League ti invita a rappresentare la tua associazione in una competizione che collega comunità in tutta Europa!</p> <p>Organizzata da club e associazioni retro, i migliori giocatori di ogni sede si sfidano in tornei presenziali fino a raggiungere la grande finale continentale.</p> <p><strong>Perché partecipare?</strong> Porta il nome del tuo club a livello europeo, rivivi i classici su hardware originale e entra a far parte della più grande rete di preservazione del continente.</p>`,
                mapSectionTitle: "Mappa delle Sedi e Sponsor",
                joinTitle: "Rappresenti un'associazione?",
                joinText: "Iscrivi il tuo club e partecipa alla più grande competizione retro del continente.",
                joinBtn: "Iscrivi il mio Club",
                statusLoading: "Mappa interattiva ufficiale EPL 2026",
                features: [{ icon: "🎮", title: "Retro Purismo", text: "Hardware originale e schermi CRT per un'esperienza definitiva." }, { icon: "🌍", title: "Rete Europea", text: "Spagna, Italia, Germania, Grecia, Austria e altri paesi uniti." }, { icon: "🤝", title: "Fratellanza", text: "Connettiamo associazioni di tutto il continente condividendo la passione." }]
            }
        }; const markersConfig = [
            { name: "Retro Nerds Münsterland e.V.", lat: 52.07923, lng: 7.00049, city: "Ahaus, DE", address: "Bahnhofstraße 10", url: "https://retronerds-muensterland.de/" },
            { name: "Video Games Museum", lat: 35.33615, lng: 25.13824, city: "Heraklion, GR", address: "Pediados 20", url: "https://www.videogamesmuseum.org/" },
            { name: "MUVIC - Videojoc de Catalunya", lat: 41.39707, lng: 2.16499, city: "Barcelona, ES", address: "C/Pérez Galdós, 45", url: "https://muvic.cat/#inici" },
            { name: "GAMM Game Museum", lat: 41.90224, lng: 12.49257, city: "Roma, IT", address: "Via delle Terme di Diocleziano, 36", url: "https://www.gammuseum.com/en/" },
            { name: "Next Level - Madrid Callao", lat: 40.42023, lng: -3.70427, city: "Madrid, ES", address: "C. de Tudescos, 4", url: "https://nextlevelarcadebar.com/" },
            { name: "Next Level - Madrid Argüelles", lat: 40.43003, lng: -3.71261, city: "Madrid, ES", address: "C. De Guzman el Bueno 13", url: "https://nextlevelarcadebar.com/" },
            { name: "Next Level - Barcelona", lat: 41.41687, lng: 2.17641, city: "Barcelona, ES", address: "Plaça Maragall 8", url: "https://nextlevelarcadebar.com/" },
            { name: "Museu del Joguet de Catalunya", lat: 42.26875, lng: 2.96445, city: "Figueres, ES", address: "c/ Sant Pere, 1", url: "https://www.mjc.cat/es/" },
            { name: "Dystopian Hobbies", lat: 42.27503, lng: 2.95543, city: "Figueres, ES", address: "Calle Nou 122", url: "https://www.instagram.com/dystopian_hobbies/?hl=es" },
            { name: "BrewOtaku - RETRO Games", lat: 51.36214, lng: 12.40424, city: "Leipzig, DE", address: "Mockauer Str. 13", url: "https://www.brewotaku.com/" },
            { name: "Gaming Museum Wien", lat: 48.19765, lng: 16.35289, city: "Wien, AT", address: "Fritz-Grünbaum-Platz 1", url: "https://www.gamingmuseum.at/" },
            { name: "La Friki Banyoles", lat: 42.125972, lng: 2.76, city: "Banyoles, ES", address: "Passeig de la Draga, s/n", url: "https://whoxperience.com/es/lafriki-home/" },
            { name: "Soc Friki Soc Cultura", lat: 42.266094, lng: 2.964487, city: "Figueres, ES", address: "Pl. Catalunya", url: "https://elgatodevader.com/soc-friki-soc-cultura" },
            { name: "Girocòmic", lat: 41.984633, lng: 2.812053, city: "Girona, ES", address: "Passeig de la Devesa, 34-36", url: "https://www.girocomic.cat/es" },
            { name: "Tecnofan Palamos", lat: 41.8507, lng: 3.1276, city: "Palamós, ES", address: "Carrer Londres", url: "https://palamostecnofan.org/" },
            { name: "Club Arcade El Gat de Vader", lat: 42.2680, lng: 2.9620, city: "Figueres, ES", address: "Pous i pages nº9", url: "https://elgatodevader.com/european-pixel-league" },
            { name: "AwesomeSpace", lat: 52.2136145, lng: 5.1452697, city: "Hilversum, NL", address: "Franciscusweg 18", url: "https://awesomespace.nl/" },
            { name: "Association WDA - Paris", lat: 48.8534, lng: 2.3488, city: "Paris, FR", address: "Centro ciudad", url: "https://wda-fr.org/" },
            { name: "Association WDA - Aix-en-Provence", lat: 43.5283, lng: 5.44973, city: "Aix-en-Provence, FR", address: "Centro ciudad", url: "https://wda-fr.org/" }
        ];
        let eplMap; let currentLang = 'es'; function initMap() {
            if (typeof L === 'undefined') { setTimeout(initMap, 500); return; } try {
                if (eplMap) return; document.getElementById('status-msg').innerText = content[currentLang].statusLoading; eplMap = L.map('map').setView([48.0, 10.0], 4); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(eplMap); const icon = L.divIcon({ className: 'custom-icon', html: '<div class="pixel-marker"></div>', iconSize: [20, 20], iconAnchor: [10, 10] }); markersConfig.forEach(s => {
                    const m = L.marker([s.lat, s.lng], { icon: icon }).addTo(eplMap);
                    let popupContent = `
                        <div style="color:#000; font-family:sans-serif; min-width:180px; padding: 5px;">
                            <strong style="color:#ff00ea; font-size:1.05rem; display:block; margin-bottom:5px;">${s.name}</strong>
                            <span style="font-size:0.85rem; color:#444;">${s.address}</span><br>
                            <span style="font-size:0.85rem; font-weight:700;">${s.city}</span>
                     `;
                    if (s.url) {
                        popupContent += `
                            <div style="margin-top:10px;">
                                <a href="${s.url}" target="_blank" style="background:#ff00ea; color:white; text-decoration:none; padding: 5px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; display: inline-block;">WEB / RRSS</a>
                            </div>
                         `;
                    }
                    popupContent += `</div>`;
                    m.bindPopup(popupContent);
                });
                setTimeout(() => { eplMap.invalidateSize(); }, 800);
            } catch (e) { console.error("Map Error:", e); document.getElementById('status-msg').innerHTML = "<span style='color:red;'>Error al cargar el mapa.</span>"; }
        } function switchLang(lang) { currentLang = lang; const data = content[lang] || content.es; const update = (id, html) => { const el = document.getElementById(id); if (el) el.innerHTML = html; }; update('main-title', data.mainTitle); update('main-subtitle', data.mainSubtitle); update('about-title', data.aboutTitle); update('about-content', data.aboutText); update('map-section-title', data.mapSectionTitle); update('join-title', data.joinTitle); update('join-text', data.joinText); update('join-btn', data.joinBtn); if (document.getElementById('status-msg')) update('status-msg', data.statusLoading); const feats = document.getElementById('features'); if (feats) { feats.innerHTML = data.features.map(f => `                     <div class="feature-card">                         <div style="font-size:3.5rem; margin-bottom:1rem;">${f.icon}</div>                         <h3 style="color:var(--accent-neon); font-family:'Press Start 2P'; font-size:0.85rem; margin-bottom:1rem;">${f.title}</h3>                         <p>${f.text}</p>                     </div>                 `).join(''); } } document.getElementById('langs').addEventListener('click', (e) => { if (e.target.dataset.lang) { document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active')); e.target.classList.add('active'); switchLang(e.target.dataset.lang); } }); window.onload = () => { switchLang('es'); initMap(); }; window.addEventListener('resize', () => { if (eplMap) eplMap.invalidateSize(); });     </script>
</body>

</html>