Widget:Test3: 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
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
Linha 7: Linha 6:
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
        /* Adicione seu estilo aqui */
         .d-flex {
         .d-flex {
             display: flex;
             display: flex;
Linha 13: Linha 13:
             flex-direction: column;
             flex-direction: column;
             margin-top: -15px;
             margin-top: -15px;
            /* Ajuste este valor conforme necessário para subir o botão */
         }
         }
         .hidden {
         .hidden {
             display: none;
             display: none;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
Linha 27: Linha 24:
             margin-top: 5px;
             margin-top: 5px;
         }
         }
         .image-container .image-item {
         .image-container .image-item {
             flex: 1 0 30%;
             flex: 1 0 30%;
             text-align: center;
             text-align: center;
         }
         }
 
        .image-container img {
.image-container img {
            object-fit: cover;
    object-fit: cover; /* Mantém a proporção da imagem, cortando se necessário */
            margin-bottom: 5px;
    margin-bottom: 5px;
        }
}
 
         .image-info {
         .image-info {
             margin-top: 5px;
             margin-top: 5px;
         }
         }
         select,
         select,
         input[type="text"],
         input[type="text"],
Linha 47: Linha 40:
             margin: 5px;
             margin: 5px;
         }
         }
         #filterButton,
         #filterButton,
         #searchButton {
         #searchButton {
             background: none;
             background: none;
            /* Remove o fundo do botão */
             border: none;
             border: none;
            /* Remove a borda do botão */
             padding: 0;
             padding: 0;
            /* Remove o padding do botão */
             cursor: pointer;
             cursor: pointer;
            /* Mostra o cursor de ponteiro ao passar sobre o botão */
             margin-top: 5px;
             margin-top: 5px;
            /* Ajuste a margem superior para subir o botão */
         }
         }
         #filterButton img,
         #filterButton img,
         #searchButton img {
         #searchButton img {
             border-radius: 12px;
             border-radius: 12px;
             width: auto;
             width: auto;
            /* Garante que a largura se ajuste ao tamanho original da imagem */
             height: auto;
             height: auto;
            /* Garante que a altura se ajuste ao tamanho original da imagem */
         }
         }
         .mw-body-content {
         .mw-body-content {
             display: flex;
             display: flex;
         }
         }
         .mw-parser-output {
         .mw-parser-output {
             display: inline-block;
             display: inline-block;
Linha 83: Linha 65:
             min-width: 410px;
             min-width: 410px;
             min-height: 320px;
             min-height: 320px;
          }
        }
 
         .input-group {
         .input-group {
             position: relative;
             position: relative;
             margin: 20px 0;
             margin: 20px 0;
            /* Ajuste a margem para mover o campo para cima */
         }
         }
         .input-group label {
         .input-group label {
             position: absolute;
             position: absolute;
             top: -18px;
             top: -18px;
            /* Eleva o texto para cima */
             background: none;
             background: none;
             padding: 0 5px;
             padding: 0 5px;
Linha 101: Linha 79:
             color: #0d0d0d;
             color: #0d0d0d;
         }
         }
         .maps__select {
         .maps__select {
             width: 100%;
             width: 100%;
            /* Mantém a largura total disponível */
             padding: 10px;
             padding: 10px;
             font-size: 16px;
             font-size: 16px;
Linha 111: Linha 87:
             appearance: none;
             appearance: none;
             background-color: #fff;
             background-color: #fff;
            /* Adiciona um fundo branco */
             box-sizing: border-box;
             box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
         }
         }
         .input-group input[type="text"] {
         .input-group input[type="text"] {
             width: 100%;
             width: 100%;
            /* Mantém a largura total disponível */
             padding: 10px;
             padding: 10px;
             font-size: 16px;
             font-size: 16px;
Linha 125: Linha 96:
             border: 1px solid #ccc;
             border: 1px solid #ccc;
             box-sizing: border-box;
             box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
         }
         }
         .maps__label {
         .maps__label {
             position: absolute;
             position: absolute;
             top: -18px;
             top: -18px;
            /* Eleva o texto um pouco mais para cima */
             background: none;
             background: none;
             padding: 0 5px;
             padding: 0 5px;
             font-size: 14px;
             font-size: 14px;
             font-weight: bold;
             font-weight: bold;
            /* Deixa o texto em negrito */
             color: #0d0d0d;
             color: #0d0d0d;
         }
         }
         .hover-minimize:hover {
         .hover-minimize:hover {
             transform: scale(0.95);
             transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
         }
         }
         .filter-container {
         .filter-container {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
         }
         }
         .filter-container input[type="checkbox"] {
         .filter-container input[type="checkbox"] {
             margin: 0;
             margin: 0;
             padding: 0;
             padding: 0;
             width: auto;
             width: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
             height: auto;
             height: auto;
            /* Ajusta o tamanho da checkbox conforme necessário */
            /* Alinha verticalmente a checkbox com o texto */
             vertical-align: middle;
             vertical-align: middle;
         }
         }
         .filter-label {
         .filter-label {
             margin-left: 10px;
             margin-left: 10px;
            /* Espaço entre a checkbox e o texto */
             font-size: 14px;
             font-size: 14px;
             font-weight: bold;
             font-weight: bold;
             color: #0d0d0d;
             color: #0d0d0d;
             line-height: 1.5;
             line-height: 1.5;
             /* Ajusta a altura da linha para um alinhamento adequado */
        }
        .tag-checkbox {
             display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tag-checkbox label {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .tag-checkbox input[type="checkbox"] {
            margin-right: 5px;
         }
         }
     </style>
     </style>
Linha 205: Linha 174:
          
          
         <div id="filterSection" class="hidden">
         <div id="filterSection" class="hidden">
             <div id="filterById" class="input-group">
             <div id="filterByTag" class="input-group">
                 <label for="filterOption" class="maps__label">Filtrar Por</label>
                 <label for="filterOption" class="maps__label">Filtrar Por Tag</label>
                 <select id="filterOption" class="maps__select">
                 <div class="tag-checkbox">
                     <option value="">Escolha uma Opção</option>
                    <label><input type="checkbox" value="Areia"> Areia</label>
                     <option value="number">Filtrar por Número</option>
                    <label><input type="checkbox" value="Grama"> Grama</label>
                     <option value="tag">Filtrar por Tag</option>  
                    <label><input type="checkbox" value="Gelo"> Gelo</label>
                </select>
                    <label><input type="checkbox" value="Árvore"> Árvore</label>
                <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
                    <label><input type="checkbox" value="Pedra"> Pedra</label>
                    <label><input type="checkbox" value="Terra"> Terra</label>
                     <label><input type="checkbox" value="Piso"> Piso</label>
                     <label><input type="checkbox" value="Construção"> Construção</label>
                     <label><input type="checkbox" value="Pântano"> Pântano</label>
                    <label><input type="checkbox" value="Pirâmide"> Pirâmide</label>
                    <label><input type="checkbox" value="Fogo"> Fogo</label>
                    <label><input type="checkbox" value="Água"> Água</label>
                </div>
             </div>
             </div>
              
              
Linha 226: Linha 203:
         </div>
         </div>
     </form>
     </form>


     <script>
     <script>
const specificOptions = {
const specificOptions = {
1: {  
    1: {  
    'Areia': [  
        'Areia': [  
    { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7',tags:['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' },  
            { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags:['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' },  
    { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7',tags:['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' },  
            { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7', tags:['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' },  
    { id: '103', local: 'Wildwind Island', coordinates: '4002, 3320, 7',tags:['Areia','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/07/Mapas_de_ADV_VERMELHO_-_4002%2C_3320%2C_7.webp' },  
            { id: '103', local: 'Wildwind Island', coordinates: '4002, 3320, 7', tags:['Areia','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/07/Mapas_de_ADV_VERMELHO_-_4002%2C_3320%2C_7.webp' },  
    { id: '104', local: 'Saffron', coordinates: '4009, 3601, 7',tags:['Areia','Árvore','Terra','Água'], imageUrl: 'https://wiki.pokexgames.com/images/f/f5/Mapas_de_ADV_VERMELHO_-_4009%2C_3601%2C_7.webp' },  
            { id: '104', local: 'Desert Oasis', coordinates: '3870, 3120, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/90/Mapas_de_ADV_VERMELHO_-_3870%2C_3120%2C_7.webp' }
     { id: '105', local: 'Hurricane Island', coordinates: '4166, 3302, 7',tags:['Areia','Árvore','Água'], imageUrl: 'https://wiki.pokexgames.com/images/0/0d/Mapas_de_ADV_VERMELHO_-_4166%2C_3302%2C_7.webp' },  
        ],
]
        'Grama': [
            },
            { id: '201', local: 'Forest Area', coordinates: '3590, 2880, 7', tags:['Grama','Árvore','Piso'], imageUrl: 'https://wiki.pokexgames.com/images/6/6a/Mapas_de_ADV_VERMELHO_-_3590%2C_2880%2C_7.webp' },
            { id: '202', local: 'Green Meadow', coordinates: '3650, 2950, 7', tags:['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/7/7d/Mapas_de_ADV_VERMELHO_-_3650%2C_2950%2C_7.webp' }
        ],
        // Adicione mais locais para outras tags conforme necessário
    },
     2: {
        'Gelo': [
            { id: '301', local: 'Ice Cave', coordinates: '2970, 3580, 7', tags:['Gelo','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/80/Mapas_de_ADV_VERMELHO_-_2970%2C_3580%2C_7.webp' },
            { id: '302', local: 'Frozen Lake', coordinates: '3100, 3650, 7', tags:['Gelo','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/9f/Mapas_de_ADV_VERMELHO_-_3100%2C_3650%2C_7.webp' }
        ],
        // Adicione mais locais para outras tags conforme necessário
    },
    // Adicione mais tipos de mapa conforme necessário
};
};


        document.getElementById('enableFilter').addEventListener('change', function () {
function updateFilters() {
            const filterSection = document.getElementById('filterSection');
    const mapType = document.getElementById('mapType').value;
            if (this.checked) {
    const specificOption = document.getElementById('specificOption').value;
                filterSection.classList.remove('hidden');
    const selectedTags = Array.from(document.querySelectorAll('#filterByTag input[type="checkbox"]:checked')).map(cb => cb.value);
            } else {
                filterSection.classList.add('hidden');
            }
        });


        document.getElementById('searchIds').addEventListener('keypress', function (event) {
    const filteredData = [];
            if (event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('filterButton').click();
            }
        });


        document.getElementById('mapType').addEventListener('change', function () {
    if (mapType && specificOption && specificOptions[mapType] && specificOptions[mapType][specificOption]) {
            const selectedMapType = this.value;
        filteredData.push(...specificOptions[mapType][specificOption]);
            const specificOptionSelect = document.getElementById('specificOption');
    }


            if (selectedMapType) {
    if (selectedTags.length > 0) {
                specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
        filteredData = filteredData.filter(item =>  
                const options = Object.keys(specificOptions[selectedMapType]);
            item.tags.some(tag => selectedTags.includes(tag))
                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 () {
    displayImages(filteredData);
            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}<br>
                        <b>Tag(s)</b>: ${image.tags.join(', ') || 'Nenhuma'}
                                </div>
                            </div>
                        `;
                    });
                }
 
                imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
            }
        });


document.getElementById('filterButton').addEventListener('click', function () {
function displayImages(data) {
    const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim().toLowerCase());
    const filterOption = document.getElementById('filterOption').value;
    const selectedMapType = document.getElementById('mapType').value;
    const selectedSpecificOption = document.getElementById('specificOption').value;
     const imageContainer = document.getElementById('imageContainer');
     const imageContainer = document.getElementById('imageContainer');
     let imagesHtml = '';
     imageContainer.innerHTML = '';
     let allImages = [];
      
 
     if (data.length === 0) {
     if (filterOption === 'tag') {
         imageContainer.classList.add('hidden');
         if (selectedMapType) {
         return;
            const mapOptions = specificOptions[selectedMapType];
            if (selectedSpecificOption) {
                const images = mapOptions[selectedSpecificOption].filter(image =>
                    searchIds.some(tag => image.tags.map(t => t.toLowerCase()).includes(tag))
                );
                allImages = allImages.concat(images);
            } else {
                Object.keys(mapOptions).forEach(option => {
                    const images = mapOptions[option].filter(image =>
                        searchIds.some(tag => image.tags.map(t => t.toLowerCase()).includes(tag))
                    );
                    allImages = allImages.concat(images);
                });
            }
        }
    } else if (filterOption === 'number') {
         if (searchIds.length > 0) {
            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);
                });
            });
        }
     }
     }


     if (allImages.length > 0) {
     imageContainer.classList.remove('hidden');
         allImages.sort((a, b) => a.local.localeCompare(b.local));
   
    data.forEach(item => {
         const imageItem = document.createElement('div');
        imageItem.className = 'image-item';
       
        const img = document.createElement('img');
        img.src = item.imageUrl;
        img.alt = item.local;
        img.width = 200;  // Ajuste o tamanho conforme necessário
        img.height = 150; // Ajuste o tamanho conforme necessário


         allImages.forEach(image => {
         const info = document.createElement('div');
            imagesHtml += `
        info.className = 'image-info';
                <div class="image-item">
        info.innerHTML = `<strong>Local:</strong> ${item.local} <br> <strong>Coordenadas:</strong> ${item.coordinates}`;
                    <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
       
                    <div class="image-info">
        imageItem.appendChild(img);
                        <b>Número do Mapa</b>: ${image.id} <br>
        imageItem.appendChild(info);
                        <b>Local</b>: ${image.local} <br>
         imageContainer.appendChild(imageItem);
                        <b>Coordenada</b>: ${image.coordinates}<br>
     });
                        <b>Tag(s)</b>: ${image.tags.join(', ') || 'Nenhuma'}
}
                    </div>
                </div>
            `;
         });
     } else {
        imagesHtml = 'Nenhuma imagem encontrada com os critérios fornecidos.';
    }


     imageContainer.innerHTML = imagesHtml;
document.getElementById('enableFilter').addEventListener('change', function() {
     imageContainer.classList.toggle('hidden', allImages.length === 0);
     const filterSection = document.getElementById('filterSection');
     filterSection.classList.toggle('hidden', !this.checked);
});
});
    </script>
 
document.getElementById('filterButton').addEventListener('click', updateFilters);
document.getElementById('mapType').addEventListener('change', updateFilters);
document.getElementById('specificOption').addEventListener('change', updateFilters);
 
updateFilters(); // Inicializa com os valores padrão
</script>
</body>
</body>
</html>
</html>

Edição das 20h12min de 3 de setembro 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>
       /* Adicione seu estilo aqui */
       .d-flex {
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
           margin-top: -15px;
       }
       .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;
           margin-bottom: 5px;
       }
       .image-info {
           margin-top: 5px;
       }
       select,
       input[type="text"],
       button {
           margin: 5px;
       }
       #filterButton,
       #searchButton {
           background: none;
           border: none;
           padding: 0;
           cursor: pointer;
           margin-top: 5px;
       }
       #filterButton img,
       #searchButton img {
           border-radius: 12px;
           width: auto;
           height: auto;
       }
       .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: 410px;
           min-height: 320px;
       }
       .input-group {
           position: relative;
           margin: 20px 0;
       }
       .input-group label {
           position: absolute;
           top: -18px;
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
       }
       .maps__select {
           width: 100%;
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           appearance: none;
           background-color: #fff;
           box-sizing: border-box;
       }
       .input-group input[type="text"] {
           width: 100%;
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           box-sizing: border-box;
       }
       .maps__label {
           position: absolute;
           top: -18px;
           background: none;
           padding: 0 5px;
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
       }
       .hover-minimize:hover {
           transform: scale(0.95);
       }
       .filter-container {
           display: flex;
           align-items: center;
       }
       .filter-container input[type="checkbox"] {
           margin: 0;
           padding: 0;
           width: auto;
           height: auto;
           vertical-align: middle;
       }
       .filter-label {
           margin-left: 10px;
           font-size: 14px;
           font-weight: bold;
           color: #0d0d0d;
           line-height: 1.5;
       }
       .tag-checkbox {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
       }
       .tag-checkbox label {
           display: flex;
           align-items: center;
           font-size: 14px;
       }
       .tag-checkbox input[type="checkbox"] {
           margin-right: 5px;
       }
   </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: { 
       'Areia': [ 
           { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', tags:['Areia','Água','Grama','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/4/4c/Mapas_de_ADV_VERMELHO_-_3780%2C_3326%2C_7.webp' }, 
           { id: '102', local: 'Wildwind Island', coordinates: '3969, 3300, 7', tags:['Areia','Terra','Árvore'], imageUrl: 'https://wiki.pokexgames.com/images/5/58/Mapas_de_ADV_VERMELHO_-_3969%2C_3300%2C_7.webp' }, 
           { id: '103', local: 'Wildwind Island', coordinates: '4002, 3320, 7', tags:['Areia','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/0/07/Mapas_de_ADV_VERMELHO_-_4002%2C_3320%2C_7.webp' }, 
           { id: '104', local: 'Desert Oasis', coordinates: '3870, 3120, 7', tags:['Areia','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/90/Mapas_de_ADV_VERMELHO_-_3870%2C_3120%2C_7.webp' }
       ],
       'Grama': [ 
           { id: '201', local: 'Forest Area', coordinates: '3590, 2880, 7', tags:['Grama','Árvore','Piso'], imageUrl: 'https://wiki.pokexgames.com/images/6/6a/Mapas_de_ADV_VERMELHO_-_3590%2C_2880%2C_7.webp' },
           { id: '202', local: 'Green Meadow', coordinates: '3650, 2950, 7', tags:['Grama','Árvore','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/7/7d/Mapas_de_ADV_VERMELHO_-_3650%2C_2950%2C_7.webp' }
       ],
       // Adicione mais locais para outras tags conforme necessário
   },
   2: { 
       'Gelo': [ 
           { id: '301', local: 'Ice Cave', coordinates: '2970, 3580, 7', tags:['Gelo','Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/8/80/Mapas_de_ADV_VERMELHO_-_2970%2C_3580%2C_7.webp' },
           { id: '302', local: 'Frozen Lake', coordinates: '3100, 3650, 7', tags:['Gelo','Água'], imageUrl: 'https://wiki.pokexgames.com/images/9/9f/Mapas_de_ADV_VERMELHO_-_3100%2C_3650%2C_7.webp' }
       ],
       // Adicione mais locais para outras tags conforme necessário
   },
   // Adicione mais tipos de mapa conforme necessário

};

function updateFilters() {

   const mapType = document.getElementById('mapType').value;
   const specificOption = document.getElementById('specificOption').value;
   const selectedTags = Array.from(document.querySelectorAll('#filterByTag input[type="checkbox"]:checked')).map(cb => cb.value);
   const filteredData = [];
   if (mapType && specificOption && specificOptions[mapType] && specificOptions[mapType][specificOption]) {
       filteredData.push(...specificOptions[mapType][specificOption]);
   }
   if (selectedTags.length > 0) {
       filteredData = filteredData.filter(item => 
           item.tags.some(tag => selectedTags.includes(tag))
       );
   }
   displayImages(filteredData);

}

function displayImages(data) {

   const imageContainer = document.getElementById('imageContainer');
   imageContainer.innerHTML = ;
   
   if (data.length === 0) {
       imageContainer.classList.add('hidden');
       return;
   }
   imageContainer.classList.remove('hidden');
   
   data.forEach(item => {
       const imageItem = document.createElement('div');
       imageItem.className = 'image-item';
       
       const img = document.createElement('img');
       img.src = item.imageUrl;
       img.alt = item.local;
       img.width = 200;  // Ajuste o tamanho conforme necessário
       img.height = 150; // Ajuste o tamanho conforme necessário
       const info = document.createElement('div');
       info.className = 'image-info';
       info.innerHTML = `Local: ${item.local} 
Coordenadas: ${item.coordinates}`; imageItem.appendChild(img); imageItem.appendChild(info); imageContainer.appendChild(imageItem); });

}

document.getElementById('enableFilter').addEventListener('change', function() {

   const filterSection = document.getElementById('filterSection');
   filterSection.classList.toggle('hidden', !this.checked);

});

document.getElementById('filterButton').addEventListener('click', updateFilters); document.getElementById('mapType').addEventListener('change', updateFilters); document.getElementById('specificOption').addEventListener('change', updateFilters);

updateFilters(); // Inicializa com os valores padrão </script> </body> </html>