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

Ir para navegação Ir para pesquisar
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 17: Linha 17:
         }
         }
         .image-container .image-item {
         .image-container .image-item {
             flex: 1 0 30%; /* Ajustado para exibir duas imagens por linha */
             flex: 1 0 45%;
             max-width: 45%;
             max-width: 45%;
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-container img {
             width: 320px; /* Tamanho fixo para as imagens */
             width: 200px;
             margin-bottom: 3px;
            height: 200px;
            object-fit: cover;
             margin-bottom: 10px;
         }
         }
         .image-info {
         .image-info {
             margin-top: 2px;
             margin-top: 5px;
         }
         }
         select {
         select, input[type="text"] {
             margin: 2px;
             margin: 5px;
         }
         }
     </style>
     </style>
Linha 59: Linha 61:
                 <option value="Pisos">Pisos</option>
                 <option value="Pisos">Pisos</option>
             </select>
             </select>
        </div>
        <div id="searchById" class="hidden">
            <label for="searchIds">Buscar por ID(s):</label>
            <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula">
            <button type="button" id="searchButton">Buscar</button>
         </div>
         </div>


Linha 70: Linha 78:
             1: { // Mapa Vermelho
             1: { // Mapa Vermelho
                 'Areia': [
                 'Areia': [
                     { local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { local: 'Wildwind Island', coordinates: '3969, 3300, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1002', local: 'Wildwind Island', coordinates: '3969, 3300, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { local: 'Wildwind Island', coordinates: '4002, 3320, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1003', local: 'Wildwind Island', coordinates: '4002, 3320, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { local: 'Hurricane Island', coordinates: '4166, 3302, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1004', local: 'Hurricane Island', coordinates: '4166, 3302, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { local: 'Shell Island', coordinates: '4266, 3359, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1005', local: 'Shell Island', coordinates: '4266, 3359, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                     { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                 ],
                 ],
                 'Gelo': [
                 'Gelo': [
                     { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { id: '2001', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                    { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { id: '2002', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { id: '2003', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                    { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { id: '2004', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                     { id: '2005', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' },
                    { local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' }
                     { id: '2006', local: 'Cerulean', coordinates: '1456, 2345, 4', imageUrl: 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png' }
                ],
                'Grama': [
                     { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' },
                    { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' },
                     { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' },
                    { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' },
                     { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' },
                    { local: 'Vermilion', coordinates: '5678, 1234, 5', imageUrl: 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png' }
                 ],
                 ],
                 'Pedra': [
                 // Outras opções do Mapa Vermelho
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' },
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' },
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' },
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' },
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' },
                    { local: 'Lavender', coordinates: '6789, 2345, 2', imageUrl: 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png' }
                ],
                'Subaquático': [
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' },
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' },
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' },
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' },
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' },
                    { local: 'Celadon', coordinates: '1234, 5678, 3', imageUrl: 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png' }
                ],
                'Terra': [
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' },
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' },
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' },
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' },
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' },
                    { local: 'Fuchsia', coordinates: '4567, 6789, 1', imageUrl: 'https://wiki.pokexgames.com/images/6/67/ExampleTerra.png' }
                ],
                'Pisos': [
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' },
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' },
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' },
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' },
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' },
                    { local: 'Cinnabar', coordinates: '7890, 1234, 6', imageUrl: 'https://wiki.pokexgames.com/images/7/78/ExamplePisos.png' }
                ]
             },
             },
             2: { // Mapa Verde
             2: { // Mapa Verde
Linha 145: Linha 114:
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
                 document.getElementById('specificOptions').classList.remove('hidden');
                document.getElementById('searchById').classList.remove('hidden');
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 document.getElementById('specificOptions').classList.add('hidden');
                document.getElementById('searchById').classList.add('hidden');
             }
             }
         });
         });
Linha 165: Linha 136:
                                 <img src="${image.imageUrl}" alt="${selectedOption}">
                                 <img src="${image.imageUrl}" alt="${selectedOption}">
                                 <div class="image-info">
                                 <div class="image-info">
                                    ID: ${image.id} <br>
                                     Local: ${image.local} <br>
                                     Local: ${image.local} <br>
                                     Coordenada: ${image.coordinates}
                                     Coordenada: ${image.coordinates}
Linha 176: Linha 148:
                             <img src="${images.imageUrl}" alt="${selectedOption}">
                             <img src="${images.imageUrl}" alt="${selectedOption}">
                             <div class="image-info">
                             <div class="image-info">
                                ID: ${images.id} <br>
                                 Local: ${images.local} <br>
                                 Local: ${images.local} <br>
                                 Coordenada: ${images.coordinates}
                                 Coordenada: ${images.coordinates}
Linha 183: Linha 156:
                 }
                 }
                 imageContainer.innerHTML = imagesHtml;
                 imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        });
        document.getElementById('searchButton').addEventListener('click', function() {
            const selectedMapType = document.getElementById('mapType').value;
            const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
            const imageContainer = document.getElementById('imageContainer');
            if (selectedMapType && searchIds.length > 0) {
                let imagesHtml = '';
                const mapOptions = specificOptions[selectedMapType];
                Object.keys(mapOptions).forEach(option => {
                    const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                    images.forEach(image => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="${option}">
                                <div class="image-info">
                                    ID: ${image.id} <br>
                                    Local: ${image.local} <br>
                                    Coordenada: ${image.coordinates}
                                </div>
                            </div>
                        `;
                    });
                });
                imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os IDs fornecidos.';
                 imageContainer.classList.remove('hidden');
                 imageContainer.classList.remove('hidden');
             } else {
             } else {
5 667

edições

Menu de navegação