Widget:Test: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(133 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<script>
<!DOCTYPE html>
<html lang="pt-BR">


const optionsImageTestz = [
<head>
     {
    <meta charset="UTF-8">
        label: "O ódio é um fardo muito grande para suportar (BEAR). Quem eu sou?",
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
        image: "/images/7/74/Unown-b.png",
    <title>Seleção e Exibição de Imagens</title>
        obs: "<center><b>Unown B</b></center>"
    <style>
    },
        .d-flex {
    {
            display: flex;
        label: "Se você persegue (CHASE) algo desesperadamente, isso te ilude. Quem eu sou?",
            justify-content: center;
        image: "/images/6/66/Unown-c.png",
            align-items: center;
        obs: "<center><b>Unown C</b></center>"
            flex-direction: column;
    },
            margin-top: -15px;
    {
            /* Ajuste este valor conforme necessário para subir o botão */
         label: "Você não pode controlar a direção (DIRECT) do vento, mas pode ajustar as velas. Quem eu sou?",
        }
         image: "/images/2/23/Unown-d.png",
 
        obs: "<center><b>Unown D</b></center>"
         .hidden {
    },
            display: none;
    {
        }
         label: "A preparação é necessária antes de participar (ENGAGE) de qualquer reunião. Quem eu sou?",
 
         image: "/images/4/42/Unown-e.png",
         .image-container {
         obs: "<center><b>Unown E</b></center>"
            display: flex;
    },
            flex-wrap: wrap;
    {
            justify-content: center;
        label: "É possível encontrar (FIND) esperança mesmo nos dias mais sombrios. Quem eu sou?",
            gap: 10px;
        image: "/images/7/70/Unown-f.png",
            margin-top: 5px;
        obs: "<center><b>Unown F</b></center>"
        }
    },
 
    {
         .image-container .image-item {
         label: "Um amigo é um presente (GIFT) que você se dá. Quem eu sou?",
            flex: 1 0 30%;
         image: "/images/2/21/Unown-g.png",
            text-align: center;
         obs: "<center><b>Unown G</b></center>"
         }
    },
 
    {
.image-container img {
         label: "Nós não podemos ajudar todo mundo, mas todo mundo pode ajudar (HELP) alguém. Quem eu sou?",
    object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
        image: "/images/1/19/Unown-h.png",
    margin-bottom: 5px;
        obs: "<center><b>Unown H</b></center>"
}
    },
 
    {
        .image-info {
         label: "O medo pode aumentar (INCREASE) sua capacidade de sobreviver. Quem eu sou?",
            margin-top: 5px;
        image: "/images/f/f4/Unown-i.png",
        }
         obs: "<center><b>Unown I</b></center>"
 
    },
        select,
    {
         input[type="text"],
         label: "Somente quando juntar (JOIN) todos os pedaços é que você poderá ver a foto. Quem eu sou?",
        button {
        image: "/images/0/02/Unown-j.png",
            margin: 5px;
         obs: "<center><b>Unown J</b></center>"
        }
    },
 
    {
        #filterButton,
         label: "Se você continuar (KEEP) seguindo em frente, você não terá que parar. Quem eu sou?",
        #searchButton {
        image: "/images/9/9d/Unown-k.png",
            background: none;
        obs: "<center><b>Unown K</b></center>"
            /* Remove o fundo do botão */
    },
            border: none;
    {
            /* Remove a borda do botão */
         label: "Você ri de mim porque eu sou diferente, eu rio (LAUGH) de vocês porque são todos iguais. Quem eu sou?",
            padding: 0;
        image: "/images/9/9c/Unown-l.png",
            /* Remove o padding do botão */
        obs: "<center><b>Unown L</b></center>"
            cursor: pointer;
    },
            /* Mostra o cursor de ponteiro ao passar sobre o botão */
    {
            margin-top: 5px;
        label: "Decida-se (MAKE), talvez você não tenha outra chance. Quem eu sou?",
            /* Ajuste a margem superior para subir o botão */
        image: "/images/9/94/Unown-m.png",
        }
        obs: "<center><b>Unown M</b></center>"
 
    },
         #filterButton img,
    {
         #searchButton img {
         label: "Você deveria encostar (NUZZLE) em algum lugar. Quem eu sou?",
            border-radius: 12px;
        image: "/images/4/4e/Unown-n.png",
            width: auto;
         obs: "<center><b>Unown N</b></center>"
            /* Garante que a largura se ajuste ao tamanho original da imagem */
    },
            height: auto;
    {
            /* Garante que a altura se ajuste ao tamanho original da imagem */
        label: "Você pode observar (OBSERVE) muito apenas assistindo. Quem eu sou?",
         }
        image: "/images/2/21/Unown-o.png",
 
        obs: "<center><b>Unown O</b></center>"
        .mw-body-content {
     },
            display: flex;
    {
        }
        label: "A vida é a farsa que todos devem executar (PERFORM). Quem eu sou?",
 
        image: "/images/a/a8/Unown-p.png",
         .mw-parser-output {
        obs: "<center><b>Unown P</b></center>"
            display: inline-block;
    },
            padding: .5rem 2rem;
    {
            margin: 0 auto;
        label: "Há momentos especiais que aceleram (QUICKEN) seu coração. Quem eu sou?",
            border: 30px solid transparent;
         image: "/images/a/ae/Unown-q.png",
            border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
         obs: "<center><b>Unown Q</b></center>"
            min-width: 340px;
    },
            min-height: 270px;
    {
          }
        label: "Você não precisa de algo para reassegurar (REASSURE) que você é real. Quem eu sou?",
 
        image: "/images/4/4f/Unown-r.png",
         .input-group {
        obs: "<center><b>Unown R</b></center>"
            position: relative;
    },
            margin: 20px 0;
    {
            /* Ajuste a margem para mover o campo para cima */
         label: "Humanos estão sempre em busca (SEARCH) de significados. Quem eu sou?",
         }
        image: "/images/f/fe/Unown-s.png",
 
        obs: "<center><b>Unown S</b></center>"
        .input-group label {
    },
            position: absolute;
    {
            top: -18px;
         label: "Se você disser (TELL) a verdade, não precisa se lembrar de nada. Quem eu sou?",
            /* Eleva o texto para cima */
        image: "/images/1/12/Unown-t.png",
            background: none;
        obs: "<center><b>Unown T</b></center>"
            padding: 0 5px;
    },
            font-size: 14px;
    {
            font-weight: bold;
        label: "Você não pode desfazer (UNDO) o passado... mas certamente pode não repeti-lo. Quem eu sou?",
            color: #0d0d0d;
        image: "/images/1/1a/Unown-u.png",
        }
        obs: "<center><b>Unown U</b></center>"
 
    },
         .maps__select {
    {
            width: 100%;
        label: "Quando você sabe o que está fazendo, quaisquer obstáculos desaparecem (VANISH) do seu caminho. Quem eu sou?",
            /* Mantém a largura total disponível */
        image: "/images/1/15/Unown-v.png",
            padding: 10px;
        obs: "<center><b>Unown V</b></center>"
            font-size: 16px;
    },
            border-radius: 5px;
    {
            border: 1px solid #ccc;
         label: "Para ter sucesso, você deve sempre saber o que quer (WANT). Quem eu sou?",
            appearance: none;
        image: "/images/a/ad/Unown-w.png",
            background-color: #fff;
        obs: "<center><b>Unown W</b></center>"
            /* Adiciona um fundo branco */
    },
            box-sizing: border-box;
     {
            /* Inclui o padding e a borda na largura total */
         label: "XXXXX. Quem eu sou?",
         }
        image: "/images/5/58/Unown-x.png",
 
        obs: "<center><b>Unown X</b></center>"
 
    },
         .input-group input[type="text"] {
    {
            width: 100%;
        label: "Às vezes, o melhor que você pode fazer é ceder (YIELD) à tentação. Quem eu sou?",
            /* Mantém a largura total disponível */
        image: "/images/f/f9/Unown-y.png",
            padding: 10px;
        obs: "<center><b>Unown Y</b></center>"
            font-size: 16px;
    },
            border-radius: 5px;
    {
            border: 1px solid #ccc;
        label: "Mantenha-se focado e amplie (ZOOM) suas metas. Quem eu sou?",
            box-sizing: border-box;
        image: "/images/8/81/Unown-z.png",
            /* Inclui o padding e a borda na largura total */
        obs: "<center><b>Unown Z</b></center>"
        }
    }
 
]
         .maps__label {
</script>
            position: absolute;
            top: -18px;
            /* Eleva o texto um pouco mais para cima */
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            /* Deixa o texto em negrito */
            color: #0d0d0d;
        }
 
        .hover-minimize:hover {
            transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
        }
 
        .filter-container {
            display: flex;
            align-items: center;
 
        }
 
         .filter-container input[type="checkbox"] {
            margin: 0;
            padding: 0;
            width: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
            height: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
            /* Alinha verticalmente a checkbox com o texto */
            vertical-align: middle;
         }
 
        .filter-label {
            margin-left: 10px;
            /* Espaço entre a checkbox e o texto */
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
            line-height: 1.5;
            /* Ajusta a altura da linha para um alinhamento adequado */
        }
    </style>
</head>
 
<body>
     <form id="mapForm">
        <div id="mapTypeSelection" class="input-group">
            <select id="mapType" class="maps__select">
                <option value="">Selecione um mapa</option>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
            <label class="maps__label" for="mapType">Tipo de Mapa</label>
         </div>
 
         <div id="specificOptions" class="hidden input-group">
            <select id="specificOption" class="maps__select">
                <option value="">Selecione uma opção</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
            <label class="maps__label" for="specificOption">Local do X</label>
        </div>
         <div class="filter-container">
            <input type="checkbox" id="enableFilter">
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
        </div>
 
         <div id="filterSection" class="hidden">
            <div id="filterById" class="input-group">
                <label for="searchIds" class="mapsCalc__label">Buscar por Nº do Mapa:</label>
                <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula"
                    class="mapsCalc__select">
            </div>
 
            <div class="d-flex justify-center align-center flex-column">
                <button type="button" id="filterButton" class="hover-minimize">
                    <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png"
                        alt="Imagem botão filtrar">
                </button>
            </div>
        </div>
         <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </form>
 
     <script>
         const specificOptions = {
            1: { // Mapa Vermelho
                'Areia': [
                    { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                ],
                // Outras opções do Mapa Vermelho
            },
          2: {  
                'Areia': [
                { id: '1001', local: ' Outland Water', coordinates: '2847, 2827, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b9/Mapa_Verde_ADV_-_2847%2C_2827%2C_6.webp' },
{ id: '1002', local: ' Outland Water', coordinates: '2863, 2850, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_2863%2C_2850%2C_6.webp' },
{ id: '1003', local: ' Respawn de Baltoy', coordinates: '5575, 5658, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/3f/Mapa_Verde_ADV_-_5575%2C_5658%2C_5.webp' },
{ id: '1004', local: ' Respawn de Vibrava', coordinates: '5616, 5729, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Verde_ADV_-_5616%2C_5729%2C_7.webp' },
{ id: '1005', local: ' Respawn de Flygon', coordinates: '5730, 5708, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/6b/Mapa_Verde_ADV_-_5730%2C_5708%2C_7.webp' },
{ id: '1006', local: ' Respawn de Pelipper', coordinates: '5814, 6111, 7', imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapa_Verde_ADV_-_5814%2C_6111%2C_7.webp' },
                ],
                'Gelo': [
                { id: '2001', local: ' Outland Ice', coordinates: '2562, 3244, 6', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2562%2C_3244%2C_6.webp' },
{ id: '2002', local: ' Outland Ice', coordinates: '2670, 3318, 8', imageUrl: 'https://wiki.pokexgames.com/images/7/71/Mapa_Verde_ADV_-_2670%2C_3318%2C_8.webp' },
{ id: '2003', local: ' Outland Ice', coordinates: '2695, 3286, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/e5/Mapa_Verde_ADV_-_2695%2C_3286%2C_7.webp' },
{ id: '2004', local: ' Outland Dragon', coordinates: '2710, 3287, 4', imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapa_Verde_ADV_-_2710%2C_3287%2C_4.webp' },
{ id: '2005', local: ' Respawn de Swellow', coordinates: '5047, 5744, 5', imageUrl: 'https://wiki.pokexgames.com/images/7/7c/Mapa_Verde_ADV_-_5047%2C_5744%2C_5.webp' },
{ id: '2006', local: ' Respawn de Walrein', coordinates: '5845, 5800, 7', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5845%2C_5800%2C_7.webp' },
                ],
                'Grama': [
                { id: '3001', local: ' Outland Bug', coordinates: '2633, 3039, 7', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2633%2C_3039%2C_7.webp' },
{ id: '3002', local: ' Outland Water', coordinates: '2654, 2810, 7', imageUrl: 'https://wiki.pokexgames.com/images/2/26/Mapa_Verde_ADV_-_2654%2C_2810%2C_7.webp' },
{ id: '3003', local: ' Outland Grass', coordinates: '2863, 2879, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/8d/Mapa_Verde_ADV_-_2863%2C_2879%2C_7.webp' },
{ id: '3004', local: ' Respawn de Nuzleaf', coordinates: '5355, 5962, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/d8/Mapa_Verde_ADV_-_5355%2C_5962%2C_7.webp' },
{ id: '3005', local: ' Respawn de Grovyle', coordinates: '5383, 5892, 6', imageUrl: 'https://wiki.pokexgames.com/images/9/9c/Mapa_Verde_ADV_-_5383%2C_5892%2C_6.webp' },
{ id: '3006', local: ' Respawn de Sceptile', coordinates: '5395, 5795, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/de/Mapa_Verde_ADV_-_5395%2C_5795%2C_6.webp' },
{ id: '3007', local: ' Respawn de Zangoose', coordinates: '5417, 5757, 7', imageUrl: 'https://wiki.pokexgames.com/images/4/49/Mapa_Verde_ADV_-_5417%2C_5757%2C_7.webp' },
{ id: '3008', local: ' Respawn de Exploud', coordinates: '5437, 5561, 5', imageUrl: 'https://wiki.pokexgames.com/images/6/6c/Mapa_Verde_ADV_-_5437%2C_5561%2C_5.webp' },
{ id: '3009', local: ' Respawn de Ludicolo', coordinates: '5463, 5838, 7', imageUrl: 'https://wiki.pokexgames.com/images/c/c3/Mapa_Verde_ADV_-_5463%2C_5838%2C_7.webp' },
{ id: '3010', local: ' Respawn de Wingull', coordinates: '5726, 6160, 7', imageUrl: 'https://wiki.pokexgames.com/images/3/37/Mapa_Verde_ADV_-_5729%2C_6160%2C_7.webp' },
{ id: '3011', local: ' Artificial Safari', coordinates: '5797, 5661, 7', imageUrl: 'https://wiki.pokexgames.com/images/3/3e/Mapa_Verde_ADV_-_5797%2C_5661%2C_7.webp' },
{ id: '3012', local: ' Artificial Safari', coordinates: '5871, 5532, 7', imageUrl: 'https://wiki.pokexgames.com/images/b/b7/Mapa_Verde_ADV_-_5871%2C_5532%2C_7.webp' },
                ],
                'Pedra': [
                { id: '4001', local: ' Outland Fire', coordinates: '2793, 3029, 7', imageUrl: 'https://wiki.pokexgames.com/images/f/fc/Mapa_Verde_ADV_-_2793%2C_3029%2C_7.webp' },
{ id: '4002', local: ' Outland Water', coordinates: '2808, 2864, 7', imageUrl: 'https://wiki.pokexgames.com/images/0/0a/Mapa_Verde_ADV_-_2808%2C_2864%2C_7.webp' },
{ id: '4003', local: ' Respawn de Hariyama', coordinates: '5368, 5779, 5', imageUrl: 'https://wiki.pokexgames.com/images/4/45/Mapa_Verde_ADV_-_5368%2C_5779%2C_5.webp' },
{ id: '4004', local: ' Respawn de Blaziken', coordinates: '5613, 5910, 4', imageUrl: 'https://wiki.pokexgames.com/images/a/ab/Mapa_Verde_ADV_-_5613%2C_5910%2C_4.webp' },
{ id: '4005', local: ' Respawn de Camerupt', coordinates: '5617, 5925, 5', imageUrl: 'https://wiki.pokexgames.com/images/a/a1/Mapa_Verde_ADV_-_5617%2C_5925%2C_5.webp' },
{ id: '4006', local: ' Respawn de Claydol', coordinates: '5621, 5667, 5', imageUrl: 'https://wiki.pokexgames.com/images/7/72/Mapa_Verde_ADV_-_5621%2C_5667%2C_5.webp' },
{ id: '4007', local: ' Respawn de Torkoal', coordinates: '5650, 5914, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_5650%2C_5914%2C_6.webp' },
                ],
                'Subaquáticos': [
                { id: '5001', local: ' Caminho da Outland North', coordinates: '4204, 4404, 12', imageUrl: 'https://wiki.pokexgames.com/images/4/4b/Mapa_Verde_ADV_-_4204%2C_4404%2C_12.webp' },
{ id: '5002', local: ' Área subaquática próximo aos Zangoose', coordinates: '5425, 5747, 8', imageUrl: 'https://wiki.pokexgames.com/images/6/63/Mapa_Verde_ADV_-_5425%2C_5747%2C_8.webp' },
                ],
                'Terra': [
                { id: '6001', local: ' Outland Ground', coordinates: '2551, 3105, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/8d/Mapa_Verde_ADV_-_2551%2C_3105%2C_7.webp' },
{ id: '6002', local: ' Outland Bug', coordinates: '2720, 3039, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/e7/Mapa_Verde_ADV_-_2720%2C_3039%2C_7.webp' },
{ id: '6003', local: ' Outland Fire', coordinates: '2842, 3073, 6', imageUrl: 'https://wiki.pokexgames.com/images/f/f1/Mapa_Verde_ADV_-_2842%2C_3073%2C_6.webp' },
{ id: '6004', local: ' Outland Grass', coordinates: '2922, 2913, 6', imageUrl: 'https://wiki.pokexgames.com/images/3/3f/Mapa_Verde_ADV_-_2922%2C_2913%2C_6.webp' },
{ id: '6005', local: ' Respawn de Toxicroak', coordinates: '5309, 5805, 6', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_5309%2C_5805%2C_6.webp' },
{ id: '6006', local: ' Respawn de Seviper', coordinates: '5317, 5787, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Verde_ADV_-_5317%2C_5787%2C_7.webp' },
{ id: '6007', local: ' Respawn de Shiftry', coordinates: '5400, 6039, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/d7/Mapa_Verde_ADV_-_5400%2C_6039%2C_6.webp' },
{ id: '6008', local: ' Respawn de Poochyena', coordinates: '5414, 6019, 8', imageUrl: 'https://wiki.pokexgames.com/images/3/31/Mapa_Verde_ADV_-_5414%2C_6019%2C_8.webp' },
{ id: '6009', local: ' Respawn de Vigoroth', coordinates: '5569, 5883, 5', imageUrl: 'https://wiki.pokexgames.com/images/b/b2/Mapa_Verde_ADV_-_5569%2C_5883%2C_5.webp' },
{ id: '6010', local: ' Respawn de Medicham', coordinates: '5606, 5682, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b3/Mapa_Verde_ADV_-_5606%2C_5682%2C_6.webp' },
{ id: '6011', local: ' Entrada dos Castform de Phenac', coordinates: '5612, 5638, 7', imageUrl: 'https://wiki.pokexgames.com/images/a/a5/Mapa_Verde_ADV_-_5612%2C_5638%2C_7.webp' },
{ id: '6012', local: ' Respawn de Swampert', coordinates: '5694, 5804, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/82/Mapa_Verde_ADV_-_5694%2C_5804%2C_7.webp' },
 
                ],
                'Pisos':[
                { id: '7001', local: ' Outland Electric', coordinates: '2505, 3105, 10', imageUrl: 'https://wiki.pokexgames.com/images/b/b8/Mapa_Verde_ADV_-_2505%2C_3105%2C_10.webp' },
                { id: '7002', local: ' Outland Psychic', coordinates: '2586, 2968, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/84/Mapa_Verde_ADV_-_2586%2C_2968%2C_7.webp' },
                { id: '7003', local: ' Outland Psychic', coordinates: '2607, 2958, 6', imageUrl: 'https://wiki.pokexgames.com/images/f/f3/Mapa_Verde_ADV_-_2607%2C_2958%2C_6.webp' },
{ id: '7004', local: ' Respawn de Lairon', coordinates: '5361, 5682, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/eb/Mapa_Verde_ADV_-_5361%2C_5682%2C_7.webp' },
{ id: '7005', local: ' Respawn de Metang', coordinates: '5437, 5561, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b0/Mapa_Verde_ADV_-_5437%2C_5561%2C_6.webp' },
{ id: '7006', local: ' Respawn de Mightyena', coordinates: '5485, 5987, 8', imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapa_Verde_ADV_-_5485%2C_5987%2C_8.webp' },
{ id: '7007', local: ' Pirâmide nos Cacturne', coordinates: '5631, 5589, 7', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5631%2C_5589%2C_7.webp' },
                ]
            },
            3: { // Mapa Roxo
                // Adicionar dados para o Mapa Roxo aqui
            }
        };
 
        document.getElementById('enableFilter').addEventListener('change', function () {
            const filterSection = document.getElementById('filterSection');
            if (this.checked) {
                filterSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
            }
        });
 
 
        document.getElementById('searchIds').addEventListener('keypress', function (event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('filterButton').click();
            }
        });
        document.getElementById('mapType').addEventListener('change', function () {
            const selectedMapType = this.value;
            const specificOptionSelect = document.getElementById('specificOption');
 
            if (selectedMapType) {
                specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                const options = Object.keys(specificOptions[selectedMapType]);
                options.forEach(option => {
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                });
                document.getElementById('specificOptions').classList.remove('hidden');
            } else {
                document.getElementById('specificOptions').classList.add('hidden');
            }
        });
 
        document.getElementById('specificOption').addEventListener('change', function () {
            const selectedMapType = document.getElementById('mapType').value;
            const selectedOption = this.value;
            const imageContainer = document.getElementById('imageContainer');
 
            if (selectedMapType && selectedOption) {
                const images = specificOptions[selectedMapType][selectedOption];
                let imagesHtml = '';
 
                if (Array.isArray(images)) {
                    images.forEach(image => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="${selectedOption}">
                                <div class="image-info">
                                    <b>Número do Mapa</b>: ${image.id} <br>
                                    <b>Local</b>: ${image.local} <br>
                                    <b>Coordenada</b>: ${image.coordinates}
                                </div>
                            </div>
                        `;
                    });
                } else {
                    imagesHtml = `
                        <div class="image-item">
                            <img src="${images.imageUrl}" alt="${selectedOption}">
                            <div class="image-info">
                                <b>Número do Mapa</b>: ${images.id} <br>
                                <b>Local</b>: ${images.local} <br>
                                <b>Coordenada</b>: ${images.coordinates}
                            </div>
                        </div>
                    `;
                }
                imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        });
 
        document.getElementById('filterButton').addEventListener('click', function () {
            const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
            const imageContainer = document.getElementById('imageContainer');
 
            if (searchIds.length > 0) {
                let imagesHtml = '';
                let allImages = [];
 
                // Recolhe todas as imagens que correspondem aos IDs
                Object.keys(specificOptions).forEach(mapType => {
                    const mapOptions = specificOptions[mapType];
                    Object.keys(mapOptions).forEach(option => {
                        const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                        allImages = allImages.concat(images);
                    });
                });
 
                // Ordena as imagens pelo nome do local
                allImages.sort((a, b) => a.local.localeCompare(b.local));
 
                // Gera o HTML para exibir as imagens ordenadas
                allImages.forEach(image => {
                    imagesHtml += `
                        <div class="image-item">
                            <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                            <div class="image-info">
                                <b>Número do Mapa</b>: ${image.id} <br>
                                <b>Local</b>: ${image.local} <br>
                                <b>Coordenada</b>: ${image.coordinates}
                            </div>
                        </div>
                    `;
                });
 
                imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os números fornecidos.';
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        });
    </script>
</body>
 
</html>

Edição atual tal como às 15h38min de 25 de agosto de 2024

<!DOCTYPE html> <html lang="pt-BR">

<head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Seleção e Exibição de Imagens</title>
   <style>
       .d-flex {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           margin-top: -15px;
           /* Ajuste este valor conforme necessário para subir o botão */
       }

       .hidden {
           display: none;
       }

       .image-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 10px;
           margin-top: 5px;
       }

       .image-container .image-item {
           flex: 1 0 30%;
           text-align: center;
       }

.image-container img { 

   object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
   margin-bottom: 5px;

} 

       .image-info {
           margin-top: 5px;
       }

       select,
       input[type="text"],
       button {
           margin: 5px;
       }

       #filterButton,
       #searchButton {
           background: none;
           /* Remove o fundo do botão */
           border: none;
           /* Remove a borda do botão */
           padding: 0;
           /* Remove o padding do botão */
           cursor: pointer;
           /* Mostra o cursor de ponteiro ao passar sobre o botão */
           margin-top: 5px;
           /* Ajuste a margem superior para subir o botão */
       }

       #filterButton img,
       #searchButton img {
           border-radius: 12px;
           width: auto;
           /* Garante que a largura se ajuste ao tamanho original da imagem */
           height: auto;
           /* Garante que a altura se ajuste ao tamanho original da imagem */
       }

       .mw-body-content {
           display: flex;
       }

       .mw-parser-output {
           display: inline-block;
           padding: .5rem 2rem;
           margin: 0 auto;
           border: 30px solid transparent;
           border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
           min-width: 340px;
           min-height: 270px;
         }

       .input-group {
           position: relative;
           margin: 20px 0;
           /* Ajuste a margem para mover o campo para cima */
       }

       .input-group label {
           position: absolute;
           top: -18px;
           /* Eleva o texto para cima */
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
       }

       .maps__select {
           width: 100%;
           /* Mantém a largura total disponível */
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           appearance: none;
           background-color: #fff;
           /* Adiciona um fundo branco */
           box-sizing: border-box;
           /* Inclui o padding e a borda na largura total */
       }



       .input-group input[type="text"] {
           width: 100%;
           /* Mantém a largura total disponível */
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           box-sizing: border-box;
           /* Inclui o padding e a borda na largura total */
       }

       .maps__label {
           position: absolute;
           top: -18px;
           /* Eleva o texto um pouco mais para cima */
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           /* Deixa o texto em negrito */
           color: #0d0d0d;
       }

       .hover-minimize:hover {
           transform: scale(0.95);
           /* Adiciona um efeito de minimizar ao passar o mouse */
       }

       .filter-container {
           display: flex;
           align-items: center;

       }

       .filter-container input[type="checkbox"] {
           margin: 0;
           padding: 0;
           width: auto;
           /* Ajusta o tamanho da checkbox conforme necessário */
           height: auto;
           /* Ajusta o tamanho da checkbox conforme necessário */
           /* Alinha verticalmente a checkbox com o texto */
           vertical-align: middle;
       }

       .filter-label {
           margin-left: 10px;
           /* Espaço entre a checkbox e o texto */
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
           line-height: 1.5;
           /* Ajusta a altura da linha para um alinhamento adequado */
       }
   </style>

</head>

<body> 

   <form id="mapForm">

           <select id="mapType" class="maps__select">
               <option value="">Selecione um mapa</option>
               <option value="1">Mapa Vermelho</option>
               <option value="2">Mapa Verde</option>
               <option value="3">Mapa Roxo</option>
           </select>
           <label class="maps__label" for="mapType">Tipo de Mapa</label>

           <input type="checkbox" id="enableFilter">
           <label for="enableFilter" class="filter-label">Ativar filtro</label>

   </form>

   <script>
       const specificOptions = {
           1: { // Mapa Vermelho
               'Areia': [
                   { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
               ],
               // Outras opções do Mapa Vermelho
           },
         2: { 
               'Areia': [
               { id: '1001', local: ' Outland Water', coordinates: '2847, 2827, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b9/Mapa_Verde_ADV_-_2847%2C_2827%2C_6.webp' },

{ id: '1002', local: ' Outland Water', coordinates: '2863, 2850, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_2863%2C_2850%2C_6.webp' }, { id: '1003', local: ' Respawn de Baltoy', coordinates: '5575, 5658, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/3f/Mapa_Verde_ADV_-_5575%2C_5658%2C_5.webp' }, { id: '1004', local: ' Respawn de Vibrava', coordinates: '5616, 5729, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Verde_ADV_-_5616%2C_5729%2C_7.webp' }, { id: '1005', local: ' Respawn de Flygon', coordinates: '5730, 5708, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/6b/Mapa_Verde_ADV_-_5730%2C_5708%2C_7.webp' }, { id: '1006', local: ' Respawn de Pelipper', coordinates: '5814, 6111, 7', imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapa_Verde_ADV_-_5814%2C_6111%2C_7.webp' }, 

               ],
               'Gelo': [
               { id: '2001', local: ' Outland Ice', coordinates: '2562, 3244, 6', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2562%2C_3244%2C_6.webp' },

{ id: '2002', local: ' Outland Ice', coordinates: '2670, 3318, 8', imageUrl: 'https://wiki.pokexgames.com/images/7/71/Mapa_Verde_ADV_-_2670%2C_3318%2C_8.webp' }, { id: '2003', local: ' Outland Ice', coordinates: '2695, 3286, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/e5/Mapa_Verde_ADV_-_2695%2C_3286%2C_7.webp' }, { id: '2004', local: ' Outland Dragon', coordinates: '2710, 3287, 4', imageUrl: 'https://wiki.pokexgames.com/images/9/94/Mapa_Verde_ADV_-_2710%2C_3287%2C_4.webp' }, { id: '2005', local: ' Respawn de Swellow', coordinates: '5047, 5744, 5', imageUrl: 'https://wiki.pokexgames.com/images/7/7c/Mapa_Verde_ADV_-_5047%2C_5744%2C_5.webp' }, { id: '2006', local: ' Respawn de Walrein', coordinates: '5845, 5800, 7', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5845%2C_5800%2C_7.webp' }, 

               ],
               'Grama': [
               { id: '3001', local: ' Outland Bug', coordinates: '2633, 3039, 7', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_2633%2C_3039%2C_7.webp' },

{ id: '3002', local: ' Outland Water', coordinates: '2654, 2810, 7', imageUrl: 'https://wiki.pokexgames.com/images/2/26/Mapa_Verde_ADV_-_2654%2C_2810%2C_7.webp' }, { id: '3003', local: ' Outland Grass', coordinates: '2863, 2879, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/8d/Mapa_Verde_ADV_-_2863%2C_2879%2C_7.webp' }, { id: '3004', local: ' Respawn de Nuzleaf', coordinates: '5355, 5962, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/d8/Mapa_Verde_ADV_-_5355%2C_5962%2C_7.webp' }, { id: '3005', local: ' Respawn de Grovyle', coordinates: '5383, 5892, 6', imageUrl: 'https://wiki.pokexgames.com/images/9/9c/Mapa_Verde_ADV_-_5383%2C_5892%2C_6.webp' }, { id: '3006', local: ' Respawn de Sceptile', coordinates: '5395, 5795, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/de/Mapa_Verde_ADV_-_5395%2C_5795%2C_6.webp' }, { id: '3007', local: ' Respawn de Zangoose', coordinates: '5417, 5757, 7', imageUrl: 'https://wiki.pokexgames.com/images/4/49/Mapa_Verde_ADV_-_5417%2C_5757%2C_7.webp' }, { id: '3008', local: ' Respawn de Exploud', coordinates: '5437, 5561, 5', imageUrl: 'https://wiki.pokexgames.com/images/6/6c/Mapa_Verde_ADV_-_5437%2C_5561%2C_5.webp' }, { id: '3009', local: ' Respawn de Ludicolo', coordinates: '5463, 5838, 7', imageUrl: 'https://wiki.pokexgames.com/images/c/c3/Mapa_Verde_ADV_-_5463%2C_5838%2C_7.webp' }, { id: '3010', local: ' Respawn de Wingull', coordinates: '5726, 6160, 7', imageUrl: 'https://wiki.pokexgames.com/images/3/37/Mapa_Verde_ADV_-_5729%2C_6160%2C_7.webp' }, { id: '3011', local: ' Artificial Safari', coordinates: '5797, 5661, 7', imageUrl: 'https://wiki.pokexgames.com/images/3/3e/Mapa_Verde_ADV_-_5797%2C_5661%2C_7.webp' }, { id: '3012', local: ' Artificial Safari', coordinates: '5871, 5532, 7', imageUrl: 'https://wiki.pokexgames.com/images/b/b7/Mapa_Verde_ADV_-_5871%2C_5532%2C_7.webp' }, 

               ],
               'Pedra': [
               { id: '4001', local: ' Outland Fire', coordinates: '2793, 3029, 7', imageUrl: 'https://wiki.pokexgames.com/images/f/fc/Mapa_Verde_ADV_-_2793%2C_3029%2C_7.webp' },

{ id: '4002', local: ' Outland Water', coordinates: '2808, 2864, 7', imageUrl: 'https://wiki.pokexgames.com/images/0/0a/Mapa_Verde_ADV_-_2808%2C_2864%2C_7.webp' }, { id: '4003', local: ' Respawn de Hariyama', coordinates: '5368, 5779, 5', imageUrl: 'https://wiki.pokexgames.com/images/4/45/Mapa_Verde_ADV_-_5368%2C_5779%2C_5.webp' }, { id: '4004', local: ' Respawn de Blaziken', coordinates: '5613, 5910, 4', imageUrl: 'https://wiki.pokexgames.com/images/a/ab/Mapa_Verde_ADV_-_5613%2C_5910%2C_4.webp' }, { id: '4005', local: ' Respawn de Camerupt', coordinates: '5617, 5925, 5', imageUrl: 'https://wiki.pokexgames.com/images/a/a1/Mapa_Verde_ADV_-_5617%2C_5925%2C_5.webp' }, { id: '4006', local: ' Respawn de Claydol', coordinates: '5621, 5667, 5', imageUrl: 'https://wiki.pokexgames.com/images/7/72/Mapa_Verde_ADV_-_5621%2C_5667%2C_5.webp' }, { id: '4007', local: ' Respawn de Torkoal', coordinates: '5650, 5914, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_5650%2C_5914%2C_6.webp' }, 

               ],
               'Subaquáticos': [
               { id: '5001', local: ' Caminho da Outland North', coordinates: '4204, 4404, 12', imageUrl: 'https://wiki.pokexgames.com/images/4/4b/Mapa_Verde_ADV_-_4204%2C_4404%2C_12.webp' },

{ id: '5002', local: ' Área subaquática próximo aos Zangoose', coordinates: '5425, 5747, 8', imageUrl: 'https://wiki.pokexgames.com/images/6/63/Mapa_Verde_ADV_-_5425%2C_5747%2C_8.webp' }, 

               ],
               'Terra': [
               { id: '6001', local: ' Outland Ground', coordinates: '2551, 3105, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/8d/Mapa_Verde_ADV_-_2551%2C_3105%2C_7.webp' },

{ id: '6002', local: ' Outland Bug', coordinates: '2720, 3039, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/e7/Mapa_Verde_ADV_-_2720%2C_3039%2C_7.webp' }, { id: '6003', local: ' Outland Fire', coordinates: '2842, 3073, 6', imageUrl: 'https://wiki.pokexgames.com/images/f/f1/Mapa_Verde_ADV_-_2842%2C_3073%2C_6.webp' }, { id: '6004', local: ' Outland Grass', coordinates: '2922, 2913, 6', imageUrl: 'https://wiki.pokexgames.com/images/3/3f/Mapa_Verde_ADV_-_2922%2C_2913%2C_6.webp' }, { id: '6005', local: ' Respawn de Toxicroak', coordinates: '5309, 5805, 6', imageUrl: 'https://wiki.pokexgames.com/images/4/40/Mapa_Verde_ADV_-_5309%2C_5805%2C_6.webp' }, { id: '6006', local: ' Respawn de Seviper', coordinates: '5317, 5787, 7', imageUrl: 'https://wiki.pokexgames.com/images/6/67/Mapa_Verde_ADV_-_5317%2C_5787%2C_7.webp' }, { id: '6007', local: ' Respawn de Shiftry', coordinates: '5400, 6039, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/d7/Mapa_Verde_ADV_-_5400%2C_6039%2C_6.webp' }, { id: '6008', local: ' Respawn de Poochyena', coordinates: '5414, 6019, 8', imageUrl: 'https://wiki.pokexgames.com/images/3/31/Mapa_Verde_ADV_-_5414%2C_6019%2C_8.webp' }, { id: '6009', local: ' Respawn de Vigoroth', coordinates: '5569, 5883, 5', imageUrl: 'https://wiki.pokexgames.com/images/b/b2/Mapa_Verde_ADV_-_5569%2C_5883%2C_5.webp' }, { id: '6010', local: ' Respawn de Medicham', coordinates: '5606, 5682, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b3/Mapa_Verde_ADV_-_5606%2C_5682%2C_6.webp' }, { id: '6011', local: ' Entrada dos Castform de Phenac', coordinates: '5612, 5638, 7', imageUrl: 'https://wiki.pokexgames.com/images/a/a5/Mapa_Verde_ADV_-_5612%2C_5638%2C_7.webp' }, { id: '6012', local: ' Respawn de Swampert', coordinates: '5694, 5804, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/82/Mapa_Verde_ADV_-_5694%2C_5804%2C_7.webp' }, 

               ],
               'Pisos':[
               { id: '7001', local: ' Outland Electric', coordinates: '2505, 3105, 10', imageUrl: 'https://wiki.pokexgames.com/images/b/b8/Mapa_Verde_ADV_-_2505%2C_3105%2C_10.webp' },
               { id: '7002', local: ' Outland Psychic', coordinates: '2586, 2968, 7', imageUrl: 'https://wiki.pokexgames.com/images/8/84/Mapa_Verde_ADV_-_2586%2C_2968%2C_7.webp' },
               { id: '7003', local: ' Outland Psychic', coordinates: '2607, 2958, 6', imageUrl: 'https://wiki.pokexgames.com/images/f/f3/Mapa_Verde_ADV_-_2607%2C_2958%2C_6.webp' },

{ id: '7004', local: ' Respawn de Lairon', coordinates: '5361, 5682, 7', imageUrl: 'https://wiki.pokexgames.com/images/e/eb/Mapa_Verde_ADV_-_5361%2C_5682%2C_7.webp' }, { id: '7005', local: ' Respawn de Metang', coordinates: '5437, 5561, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b0/Mapa_Verde_ADV_-_5437%2C_5561%2C_6.webp' }, { id: '7006', local: ' Respawn de Mightyena', coordinates: '5485, 5987, 8', imageUrl: 'https://wiki.pokexgames.com/images/0/06/Mapa_Verde_ADV_-_5485%2C_5987%2C_8.webp' }, { id: '7007', local: ' Pirâmide nos Cacturne', coordinates: '5631, 5589, 7', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5631%2C_5589%2C_7.webp' }, 

               ]
           },
           3: { // Mapa Roxo
               // Adicionar dados para o Mapa Roxo aqui
           }
       };

       document.getElementById('enableFilter').addEventListener('change', function () {
           const filterSection = document.getElementById('filterSection');
           if (this.checked) {
               filterSection.classList.remove('hidden');
           } else {
               filterSection.classList.add('hidden');
           }
       });



       document.getElementById('searchIds').addEventListener('keypress', function (event) {
           if (event.key === 'Enter') {
               event.preventDefault();
               document.getElementById('filterButton').click();
           }
       });
       document.getElementById('mapType').addEventListener('change', function () {
           const selectedMapType = this.value;
           const specificOptionSelect = document.getElementById('specificOption');

           if (selectedMapType) {
               specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
               const options = Object.keys(specificOptions[selectedMapType]);
               options.forEach(option => {
                   specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
               });
               document.getElementById('specificOptions').classList.remove('hidden');
           } else {
               document.getElementById('specificOptions').classList.add('hidden');
           }
       });

       document.getElementById('specificOption').addEventListener('change', function () {
           const selectedMapType = document.getElementById('mapType').value;
           const selectedOption = this.value;
           const imageContainer = document.getElementById('imageContainer');

           if (selectedMapType && selectedOption) {
               const images = specificOptions[selectedMapType][selectedOption];
               let imagesHtml = ;

               if (Array.isArray(images)) {
                   images.forEach(image => {
                       imagesHtml += `

                               <img src="${image.imageUrl}" alt="${selectedOption}">

                                   Número do Mapa: ${image.id} 

                                    Local: ${image.local} 

                                    Coordenada: ${image.coordinates}

                       `;
                   });
               } else {
                   imagesHtml = `

                           <img src="${images.imageUrl}" alt="${selectedOption}">

                               Número do Mapa: ${images.id} 

                               Local: ${images.local} 

                               Coordenada: ${images.coordinates}

                   `;
               }
               imageContainer.innerHTML = imagesHtml;
               imageContainer.classList.remove('hidden');
           } else {
               imageContainer.classList.add('hidden');
           }
       });

       document.getElementById('filterButton').addEventListener('click', function () {
           const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
           const imageContainer = document.getElementById('imageContainer');

           if (searchIds.length > 0) {
               let imagesHtml = ;
               let allImages = [];

               // Recolhe todas as imagens que correspondem aos IDs
               Object.keys(specificOptions).forEach(mapType => {
                   const mapOptions = specificOptions[mapType];
                   Object.keys(mapOptions).forEach(option => {
                       const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                       allImages = allImages.concat(images);
                   });
               });

               // Ordena as imagens pelo nome do local
               allImages.sort((a, b) => a.local.localeCompare(b.local));

               // Gera o HTML para exibir as imagens ordenadas
               allImages.forEach(image => {
                   imagesHtml += `

                           <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">

                               Número do Mapa: ${image.id} 

                               Local: ${image.local} 

                               Coordenada: ${image.coordinates}

                   `;
               });

               imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os números fornecidos.';
               imageContainer.classList.remove('hidden');
           } else {
               imageContainer.classList.add('hidden');
           }
       });
   </script>

</body>

</html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test&oldid=85718”