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 7: Linha 7:
     <title>Seleção e Exibição de Mapas</title>
     <title>Seleção e Exibição de Mapas</title>
     <style>
     <style>
    .d-flex {
        /* Estilos já fornecidos */
        .d-flex {
             display: flex;
             display: flex;
             justify-content: center;
             justify-content: center;
Linha 13: Linha 14:
             flex-direction: column;
             flex-direction: column;
             margin-top: -15px;
             margin-top: -15px;
            /* Ajuste este valor conforme necessário para subir o botão */
         }
         }


Linha 33: Linha 33:
         }
         }


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


         .image-info {
         .image-info {
Linha 51: Linha 51:
         #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 */
         }
         }


Linha 66: Linha 61:
             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 */
         }
         }


Linha 83: Linha 76:
             min-width: 340px;
             min-width: 340px;
             min-height: 270px;
             min-height: 270px;
          }
        }


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


Linha 94: Linha 86:
             position: absolute;
             position: absolute;
             top: -18px;
             top: -18px;
            /* Eleva o texto para cima */
             background: none;
             background: none;
             padding: 0 5px;
             padding: 0 5px;
Linha 104: Linha 95:
         .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 101:
             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 111:
             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 */
         }
         }


Linha 131: Linha 116:
             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;
         }
         }
Linha 143: Linha 126:
             transform: scale(0.95);
             transform: scale(0.95);
             cursor: pointer;
             cursor: pointer;
            /* Adiciona um efeito de minimizar ao passar o mouse */
         }
         }


Linha 149: Linha 131:
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
         }
         }


Linha 156: Linha 137:
             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;
         }
         }
Linha 165: Linha 143:
         .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 */
        }
        .hidden {
            display: none;
         }
         }
         .selected {
         .selected {
             border: 2px solid #4CAF50;
             border: 2px solid #4CAF50;
         }
         }
 
         .checkbox-item {
         .checkbox-item {
             display: flex;
             display: flex;
Linha 206: Linha 180:
             <select id="specificOption" class="maps__select">
             <select id="specificOption" class="maps__select">
                 <option value="">Selecione uma opção</option>
                 <option value="">Selecione uma opção</option>
                <!-- As opções serão adicionadas dinamicamente -->
             </select>
             </select>
             <label class="maps__label" for="specificOption">Local do X</label>
             <label class="maps__label" for="specificOption">Local do X</label>
Linha 224: Linha 197:
                     <option value="tag">Filtrar por Tag</option>
                     <option value="tag">Filtrar por Tag</option>
                 </select>
                 </select>
                 <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="mapsCalc__select">
                 <input type="text" id="searchIds" placeholder="Digite os números ou tags separados por vírgula" class="maps__select">
             </div>
             </div>


Linha 258: Linha 231:
             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' }
                    // Adicione mais itens conforme necessário
                 ],
                 ],
             },
             },
             3: {
             3: {
                 'Grama': [
                 'Grama': [
                     { id: '30001', local: 'Respawn de Darkrai', coordinates: '30792, 20621, 5', tags: ['Grama', 'Árvore', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' },
                     { id: '30001', local: 'Respawn de Darkrai', coordinates: '30792, 20621, 5', tags: ['Grama', 'Árvore', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' }
                    // Adicione mais itens conforme necessário
                 ],
                 ],
                 'Pisos': [
                 'Pisos': [
                     { id: '70001', local: 'Respawn de Infernape', coordinates: '30793, 20532, 3', tags: ['Piso', 'Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' },
                     { id: '70001', local: 'Respawn de Infernape', coordinates: '30793, 20532, 3', tags: ['Piso', 'Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' }
                    // Adicione mais itens conforme necessário
                 ],
                 ],
             }
             }
Linha 276: Linha 246:
         const enableFilter = document.getElementById('enableFilter');
         const enableFilter = document.getElementById('enableFilter');
         const filterSection = document.getElementById('filterSection');
         const filterSection = document.getElementById('filterSection');
         const mapType = document.getElementById('mapType');
         const filterOption = document.getElementById('filterOption');
         const specificOption = document.getElementById('specificOption');
         const searchIds = document.getElementById('searchIds');
         const filterButton = document.getElementById('filterButton');
         const filterButton = document.getElementById('filterButton');
         const imageContainer = document.getElementById('imageContainer');
         const imageContainer = document.getElementById('imageContainer');
        const searchIds = document.getElementById('searchIds');
        const filterOption = document.getElementById('filterOption');
         const saveButton = document.getElementById('saveButton');
         const saveButton = document.getElementById('saveButton');
         const loadButton = document.getElementById('loadButton');
         const loadButton = document.getElementById('loadButton');
         const clearButton = document.getElementById('clearButton');
         const clearButton = document.getElementById('clearButton');
         const specificOptionsDiv = document.getElementById('specificOptions');
         const mapType = document.getElementById('mapType');
        const specificOption = document.getElementById('specificOption');
        const specificOptionsContainer = document.getElementById('specificOptions');


         let savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || [];
         // Ativar/desativar seção de filtro
        enableFilter.addEventListener('change', () => {
            filterSection.classList.toggle('hidden', !enableFilter.checked);
        });


         // Função para atualizar o campo Local do X conforme o Tipo de Mapa selecionado
         // Atualizar opções específicas com base no tipo de mapa
         mapType.addEventListener('change', () => {
         mapType.addEventListener('change', (event) => {
             specificOption.innerHTML = '<option value="">Selecione uma opção</option>'; // Resetar opções
            const selectedMapType = event.target.value;
             imageContainer.innerHTML = ''; // Limpar imagens anteriores
             specificOption.innerHTML = '<option value="">Selecione uma opção</option>';
            if (mapType.value) {
             specificOptionsContainer.classList.toggle('hidden', !selectedMapType);
                specificOptionsDiv.classList.remove('hidden');


                const options = specificOptions[mapType.value];
            if (specificOptions[selectedMapType]) {
                 for (const option in options) {
                 Object.keys(specificOptions[selectedMapType]).forEach(key => {
                    const newOption = document.createElement('option');
                     specificOption.innerHTML += `<option value="${key}">${key}</option>`;
                     newOption.value = option;
                 });
                    newOption.textContent = option;
                    specificOption.appendChild(newOption);
                 }
            } else {
                specificOptionsDiv.classList.add('hidden');
             }
             }
         });
         });


         // Função para exibir as imagens correspondentes ao Local do X selecionado
         // Exibir imagens com base na seleção
         specificOption.addEventListener('change', () => {
         filterButton.addEventListener('click', () => {
            imageContainer.innerHTML = ''; // Limpar imagens anteriores
             const selectedMapType = mapType.value;
             const selectedType = specificOptions[mapType.value];
             const selectedOption = specificOption.value;
             if (selectedType && selectedType[specificOption.value]) {
            const filterValue = searchIds.value.trim().toLowerCase();
                imageContainer.classList.remove('hidden');
            const filterBy = filterOption.value;
                selectedType[specificOption.value].forEach(item => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');


                    const checkbox = document.createElement('input');
            let imagesToDisplay = [];
                    checkbox.type = 'checkbox';
                    checkbox.id = `map-${item.id}`;
                    checkbox.dataset.id = item.id;
                    checkbox.classList.add('map-checkbox');


                    const label = document.createElement('label');
            if (specificOptions[selectedMapType] && specificOptions[selectedMapType][selectedOption]) {
                    label.htmlFor = checkbox.id;
                imagesToDisplay = specificOptions[selectedMapType][selectedOption];
                    label.textContent = item.local;
            }


                    const img = document.createElement('img');
            // Filtro por tag e número
                    img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
            if (filterBy === 'tag' && filterValue) {
                    img.alt = 'Mapa Não Selecionado';
                imagesToDisplay = imagesToDisplay.filter(item => item.tags.some(tag => tag.toLowerCase().includes(filterValue)));
                    img.dataset.id = item.id;
            } else if (filterBy === 'number' && filterValue) {
                    img.classList.add('map-image');
                imagesToDisplay = imagesToDisplay.filter(item => filterValue.split(',').map(id => id.trim()).includes(item.id));
            }


                    imageItem.appendChild(checkbox);
            // Mostrar imagens
                    imageItem.appendChild(img);
            imageContainer.innerHTML = '';
                    imageItem.appendChild(label);
            if (imagesToDisplay.length > 0) {
 
                imageContainer.classList.remove('hidden');
                     imageContainer.appendChild(imageItem);
                imagesToDisplay.forEach(item => {
                     imageContainer.innerHTML += `
                        <div class="image-item">
                            <img src="${item.imageUrl}" alt="Mapa">
                            <div class="image-info">
                                <p>ID: ${item.id}</p>
                                <p>Local: ${item.local}</p>
                                <p>Coordenadas: ${item.coordinates}</p>
                                <p>Tags: ${item.tags.join(', ')}</p>
                            </div>
                        </div>
                    `;
                 });
                 });
            } else {
                imageContainer.classList.add('hidden');
             }
             }
         });
         });


         // Função para salvar mapas selecionados
         // Função para salvar mapas
         saveButton.addEventListener('click', () => {
         saveButton.addEventListener('click', () => {
             const selectedMaps = Array.from(document.querySelectorAll('.map-checkbox:checked'))
             const selectedMaps = [...document.querySelectorAll('.image-item')].map(item => item.querySelector('img').src);
                .map(checkbox => checkbox.dataset.id);
 
             localStorage.setItem('savedMaps', JSON.stringify(selectedMaps));
             localStorage.setItem('savedMaps', JSON.stringify(selectedMaps));
            savedMaps = selectedMaps;
            alert('Mapas salvos com sucesso!');
         });
         });


         // Função para carregar mapas salvos
         // Função para carregar mapas salvos
         loadButton.addEventListener('click', () => {
         loadButton.addEventListener('click', () => {
             const selectedMaps = JSON.parse(localStorage.getItem('savedMaps')) || [];
             const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || [];
             document.querySelectorAll('.map-checkbox').forEach(checkbox => {
             imageContainer.innerHTML = '';
                 if (selectedMaps.includes(checkbox.dataset.id)) {
            savedMaps.forEach(mapUrl => {
                     checkbox.checked = true;
                 imageContainer.innerHTML += `
                    checkbox.nextElementSibling.src = 'https://wiki.pokexgames.com/images/2/2d/Comvip.png';
                     <div class="image-item">
                } else {
                        <img src="${mapUrl}" alt="Mapa">
                    checkbox.checked = false;
                     </div>
                     checkbox.nextElementSibling.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
                 `;
                 }
             });
             });
             alert('Mapas salvos carregados com sucesso!');
             imageContainer.classList.remove('hidden');
         });
         });


         // Função para limpar os mapas salvos
         // Função para limpar mapas salvos
         clearButton.addEventListener('click', () => {
         clearButton.addEventListener('click', () => {
             localStorage.removeItem('savedMaps');
             localStorage.removeItem('savedMaps');
            savedMaps = [];
             imageContainer.innerHTML = '';
            document.querySelectorAll('.map-checkbox').forEach(checkbox => {
             imageContainer.classList.add('hidden');
                checkbox.checked = false;
                checkbox.nextElementSibling.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
            });
            alert('Mapas salvos foram limpos com sucesso!');
        });
 
        // Função para aplicar o filtro
        filterButton.addEventListener('click', () => {
            const selectedType = mapType.value;
            const selectedOption = specificOption.value;
            const searchText = searchIds.value.toLowerCase();
            const filter = filterOption.value;
 
             imageContainer.innerHTML = ''; // Limpar imagens anteriores
 
             if (filter === 'number') {
                const filteredMaps = selectedType && selectedOption
                    ? specificOptions[selectedType][selectedOption].filter(item => searchText.split(',').map(text => text.trim()).includes(item.id))
                    : [];
 
                filteredMaps.forEach(item => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
 
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.id = `map-${item.id}`;
                    checkbox.dataset.id = item.id;
                    checkbox.classList.add('map-checkbox');
 
                    const label = document.createElement('label');
                    label.htmlFor = checkbox.id;
                    label.textContent = item.local;
 
                    const img = document.createElement('img');
                    img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
                    img.alt = 'Mapa Não Selecionado';
                    img.dataset.id = item.id;
                    img.classList.add('map-image');
 
                    imageItem.appendChild(checkbox);
                    imageItem.appendChild(img);
                    imageItem.appendChild(label);
 
                    imageContainer.appendChild(imageItem);
                });
            } else if (filter === 'tag') {
                if (selectedType && selectedOption) {
                    const tags = searchText.split(',').map(text => text.trim());
                    const filteredMaps = specificOptions[selectedType][selectedOption].filter(item => tags.some(tag => item.tags.includes(tag)));
 
                    filteredMaps.forEach(item => {
                        const imageItem = document.createElement('div');
                        imageItem.classList.add('image-item');
 
                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.id = `map-${item.id}`;
                        checkbox.dataset.id = item.id;
                        checkbox.classList.add('map-checkbox');
 
                        const label = document.createElement('label');
                        label.htmlFor = checkbox.id;
                        label.textContent = item.local;
 
                        const img = document.createElement('img');
                        img.src = 'https://wiki.pokexgames.com/images/2/26/Semvip.png';
                        img.alt = 'Mapa Não Selecionado';
                        img.dataset.id = item.id;
                        img.classList.add('map-image');
 
                        imageItem.appendChild(checkbox);
                        imageItem.appendChild(img);
                        imageItem.appendChild(label);
 
                        imageContainer.appendChild(imageItem);
                    });
                } else {
                    alert('Selecione pelo menos um tipo de mapa');
                }
            } else {
                alert('Escolha um tipo de filtro');
            }
         });
         });


         // Exibir/ocultar a seção de filtro quando o checkbox é ativado
         // Inicializar seleção
         enableFilter.addEventListener('change', () => {
         mapType.dispatchEvent(new Event('change'));
            if (enableFilter.checked) {
                filterSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
            }
        });
     </script>
     </script>
</body>
</body>


</html>
</html>

Edição das 03h45min 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 Mapas</title>
   <style>
       /* Estilos já fornecidos */
       .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: 340px;
           min-height: 270px;
       }
       .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);
           cursor: pointer;
       }
       .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;
       }
       .selected {
           border: 2px solid #4CAF50;
       }
       .checkbox-item {
           display: flex;
           align-items: center;
           margin-bottom: 10px;
       }
       .checkbox-item input {
           margin-right: 10px;
       }
   </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>
           <button type="button" id="saveButton" class="hover-minimize">
               <img src="https://wiki.pokexgames.com/images/6/6f/Save_Icon.png" alt="Salvar Mapas">
               Salvar Mapas Selecionados
           </button>
           <button type="button" id="loadButton" class="hover-minimize">
               <img src="https://wiki.pokexgames.com/images/6/6f/Load_Icon.png" alt="Carregar Mapas">
               Carregar Mapas Selecionados
           </button>
           <button type="button" id="clearButton" class="hover-minimize">
               <img src="https://wiki.pokexgames.com/images/6/6f/Clear_Icon.png" alt="Limpar Mapas">
               Limpar Mapas Salvos
           </button>
   </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' }
               ],
           },
           3: {
               'Grama': [
                   { id: '30001', local: 'Respawn de Darkrai', coordinates: '30792, 20621, 5', tags: ['Grama', 'Árvore', 'Pedra'], imageUrl: 'https://wiki.pokexgames.com/images/2/23/Mapas_de_ADV_ROXO_-_30792%2C_20621%2C_5.webp' }
               ],
               'Pisos': [
                   { id: '70001', local: 'Respawn de Infernape', coordinates: '30793, 20532, 3', tags: ['Piso', 'Construção', 'Fogo'], imageUrl: 'https://wiki.pokexgames.com/images/6/6f/Mapas_de_ADV_ROXO_-_30793%2C_20532%2C_3.webp' }
               ],
           }
       };
       const enableFilter = document.getElementById('enableFilter');
       const filterSection = document.getElementById('filterSection');
       const filterOption = document.getElementById('filterOption');
       const searchIds = document.getElementById('searchIds');
       const filterButton = document.getElementById('filterButton');
       const imageContainer = document.getElementById('imageContainer');
       const saveButton = document.getElementById('saveButton');
       const loadButton = document.getElementById('loadButton');
       const clearButton = document.getElementById('clearButton');
       const mapType = document.getElementById('mapType');
       const specificOption = document.getElementById('specificOption');
       const specificOptionsContainer = document.getElementById('specificOptions');
       // Ativar/desativar seção de filtro
       enableFilter.addEventListener('change', () => {
           filterSection.classList.toggle('hidden', !enableFilter.checked);
       });
       // Atualizar opções específicas com base no tipo de mapa
       mapType.addEventListener('change', (event) => {
           const selectedMapType = event.target.value;
           specificOption.innerHTML = '<option value="">Selecione uma opção</option>';
           specificOptionsContainer.classList.toggle('hidden', !selectedMapType);
           if (specificOptions[selectedMapType]) {
               Object.keys(specificOptions[selectedMapType]).forEach(key => {
                   specificOption.innerHTML += `<option value="${key}">${key}</option>`;
               });
           }
       });
       // Exibir imagens com base na seleção
       filterButton.addEventListener('click', () => {
           const selectedMapType = mapType.value;
           const selectedOption = specificOption.value;
           const filterValue = searchIds.value.trim().toLowerCase();
           const filterBy = filterOption.value;
           let imagesToDisplay = [];
           if (specificOptions[selectedMapType] && specificOptions[selectedMapType][selectedOption]) {
               imagesToDisplay = specificOptions[selectedMapType][selectedOption];
           }
           // Filtro por tag e número
           if (filterBy === 'tag' && filterValue) {
               imagesToDisplay = imagesToDisplay.filter(item => item.tags.some(tag => tag.toLowerCase().includes(filterValue)));
           } else if (filterBy === 'number' && filterValue) {
               imagesToDisplay = imagesToDisplay.filter(item => filterValue.split(',').map(id => id.trim()).includes(item.id));
           }
           // Mostrar imagens
           imageContainer.innerHTML = ;
           if (imagesToDisplay.length > 0) {
               imageContainer.classList.remove('hidden');
               imagesToDisplay.forEach(item => {
                   imageContainer.innerHTML += `
                           <img src="${item.imageUrl}" alt="Mapa">

ID: ${item.id}

Local: ${item.local}

Coordenadas: ${item.coordinates}

Tags: ${item.tags.join(', ')}

                   `;
               });
           } else {
               imageContainer.classList.add('hidden');
           }
       });
       // Função para salvar mapas
       saveButton.addEventListener('click', () => {
           const selectedMaps = [...document.querySelectorAll('.image-item')].map(item => item.querySelector('img').src);
           localStorage.setItem('savedMaps', JSON.stringify(selectedMaps));
       });
       // Função para carregar mapas salvos
       loadButton.addEventListener('click', () => {
           const savedMaps = JSON.parse(localStorage.getItem('savedMaps')) || [];
           imageContainer.innerHTML = ;
           savedMaps.forEach(mapUrl => {
               imageContainer.innerHTML += `
                       <img src="${mapUrl}" alt="Mapa">
               `;
           });
           imageContainer.classList.remove('hidden');
       });
       // Função para limpar mapas salvos
       clearButton.addEventListener('click', () => {
           localStorage.removeItem('savedMaps');
           imageContainer.innerHTML = ;
           imageContainer.classList.add('hidden');
       });
       // Inicializar seleção
       mapType.dispatchEvent(new Event('change'));
   </script>

</body>

</html>