HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

256x256

29.8 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Pokémon GO</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        body { margin: 0; font-family: sans-serif; overflow: hidden; }
        #map { height: 100vh; width: 100vw; }
        
        /* Interfaz de Usuario */
        #ui { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; text-align: center; }
        .stats { background: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); margin-bottom: 10px; }
        
        /* Pantalla de Captura */
        #capture-screen {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle, #76c7c0, #2c3e50);
            z-index: 2000; flex-direction: column; align-items: center; justify-content: center;
        }
        #wild-pokemon { width: 150px; transition: transform 0.3s; }
        .pokeball { width: 60px; cursor: pointer; margin-top: 50px; animation: bounce 1s infinite; }
        
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
    </style>
</head>
<body>

    <div id="map"></div>

    <div id="ui">
        <div class="stats">
            <b>Nivel 1</b> | Pokémon atrapados: <span id="count">0</span>
        </div>
        <p style="color: white; text-shadow: 1px 1px 2px black;">Haz clic en el mapa para caminar</p>
    </div>

    <div id="capture-screen">
        <h2 id="pokemon-name" style="color: white;">¡Un Pokémon salvaje apareció!</h2>
        <img id="wild-pokemon" src="" alt="pokemon">
        <img class="pokeball" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png" onclick="catchPokemon()">
        <p style="color: white;">¡Toca la PokéBall para atraparlo!</p>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        let count = 0;
        let currentPokemon = null;

        // Inicializar Mapa (Céntrico: Madrid, puedes cambiarlo)
        const map = L.map('map').setView([40.4167, -3.7037], 18);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        // Icono del Jugador
        const playerIcon = L.divIcon({ html: '🚶‍♂️', className: 'player-icon', iconSize: [30, 30] });
        let playerMarker = L.marker([40.4167, -3.7037], { icon: playerIcon }).addTo(map);

        // Moverse al hacer clic
        map.on('click', function(e) {
            playerMarker.setLatLng(e.latlng);
            checkSpawn(e.latlng);
        });

        // Generar Pokémon aleatorio
        function checkSpawn(latlng) {
            if (Math.random() > 0.6) { // 40% de probabilidad
                const id = Math.floor(Math.random() * 150) + 1;
                const pokemonMarker = L.marker(latlng, {
                    icon: L.icon({
                        iconUrl: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`,
                        iconSize: [60, 60]
                    })
                }).addTo(map);

                pokemonMarker.on('click', () => startCapture(id, pokemonMarker));
            }
        }

        function startCapture(id, marker) {
            currentPokemon = { id, marker };
            document.getElementById('wild-pokemon').src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`;
            document.getElementById('capture-screen').style.display = 'flex';
        }

        function catchPokemon() {
            alert("¡Atrapado!");
            count++;
            document.getElementById('count').innerText = count;
            document.getElementById('capture-screen').style.display = 'none';
            map.removeLayer(currentPokemon.marker);
        }
    </script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

905KB

Transfer Size

1007KB

Content Size

297.0ms

Dom Content Loaded

200.0ms

First Paint

592.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests