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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 04h08min de 27 de agosto de 2024

2 664 bytes removidos ,  27 agosto
sem sumário de edição
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 13: Linha 12:
             flex-direction: column;
             flex-direction: column;
             margin-top: -15px;
             margin-top: -15px;
            /* Ajuste este valor conforme necessário para subir o botão */
         }
         }


Linha 34: Linha 32:


         .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;
         }
         }
Linha 51: Linha 49:
         #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 59:
             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 88: Linha 79:
             position: relative;
             position: relative;
             margin: 20px 0;
             margin: 20px 0;
            /* Ajuste a margem para mover o campo para cima */
         }
         }


Linha 94: Linha 84:
             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 93:
         .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 99:
             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 124: Linha 109:
             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 130: Linha 114:
             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 141: Linha 123:
         .hover-minimize:hover {
         .hover-minimize:hover {
             transform: scale(0.95);
             transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
         }
         }


Linha 153: Linha 134:
             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 162: Linha 140:
         .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 */
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <div class="container">
         <div id="mapTypeSelection" class="input-group">
         <div class="filters">
            <select id="mapType" class="maps__select">
            <div class="input-group">
                <option value="">Selecione um mapa</option>
                <label for="typeMap" class="maps__label">Tipo de Mapa:</label>
                <option value="1">Mapa Vermelho</option>
                <select id="typeMap" class="maps__select">
                <option value="2">Mapa Verde</option>
                    <option value="">Selecione um tipo</option>
                <option value="3">Mapa Roxo</option>
                    <option value="1">Mapa Vermelho</option>
            </select>
                    <option value="2">Mapa Verde</option>
             <label class="maps__label" for="mapType">Tipo de Mapa</label>
                    <option value="3">Mapa Roxo</option>
        </div>
                </select>
             </div>


        <div id="specificOptions" class="hidden input-group">
            <div class="input-group">
            <select id="specificOption" class="maps__select">
                <label for="specificLocation" class="maps__label">Local do X:</label>
                <option value="">Selecione uma opção</option>
                <select id="specificLocation" class="maps__select">
                <option value="Areia">Areia</option>
                    <option value="">Selecione um local</option>
                <option value="Gelo">Gelo</option>
                    <option value="Areia">Areia</option>
                <option value="Grama">Grama</option>
                    <option value="Gelo">Gelo</option>
                <option value="Pedra">Pedra</option>
                    <option value="Grama">Grama</option>
                <option value="Subaquático">Subaquático</option>
                    <option value="Pedra">Pedra</option>
                <option value="Terra">Terra</option>
                    <option value="Subaquático">Subaquático</option>
                <option value="Pisos">Pisos</option>
                    <option value="Terra">Terra</option>
            </select>
                    <option value="Pisos">Pisos</option>
             <label class="maps__label" for="specificOption">Local do X</label>
                </select>
        </div>
             </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 class="filter-container">
            <div id="filterById" class="input-group">
                <input type="checkbox" id="toggleFilter">
                 <label for="searchIds" class="maps__label">Filtrar por Número:</label>
                 <label for="toggleFilter" class="filter-label">Ativar Filtro</label>
                <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="maps__select">
             </div>
             </div>


             <div id="filterByTag" class="hidden input-group">
             <div id="filterOptions" class="hidden">
                <label for="searchTags" class="maps__label">Filtrar por Tag:</label>
                <div class="input-group">
                <input type="text" id="searchTags" placeholder="Digite a tag desejada" class="maps__select">
                    <label for="filterBy" class="maps__label">Filtrar por:</label>
            </div>
                    <select id="filterBy" class="maps__select">
                        <option value="">Selecione uma opção</option>
                        <option value="number">Número</option>
                        <option value="tag">Tag</option>
                    </select>
                </div>


            <div class="d-flex justify-center align-center flex-column">
                <div class="input-group">
                <button type="button" id="filterButton" class="hover-minimize">
                    <input type="text" id="filterValue" placeholder="Digite o valor">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
                     <button id="filterButton" class="hover-minimize">Filtrar</button>
                 </button>
                 </div>
             </div>
             </div>
         </div>
         </div>


         <div id="imageContainer" class="image-container hidden">
         <div id="mapsContainer" class="image-container"></div>
            <!-- As imagens e suas informações serão exibidas aqui -->
 
        </div>
        <div id="errorMessage" class="error-message"></div>
     </form>
     </div>


     <script>
     <script>
         const specificOptions = {
         const specificOptions = {
             1: { // Mapa Vermelho
             1: {
                 'Areia': [
                 Areia: [
                     { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png', tag: 'Areia' },
                     { id: '7007', local: 'Pirâmide nos Cacturne', coordinates: '5631, 5589, 7', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5631%2C_5589%2C_7.webp' },
                    { id: '7008', local: 'Praia da Areia', coordinates: '4500, 5000, 8', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png' }
                 ],
                 ],
                 // Outras opções do Mapa Vermelho
                 Gelo: [
                    // Mapas de Gelo para o Mapa Vermelho
                ],
                // Outras categorias conforme necessário
             },
             },
             2: {
             2: {
                 'Areia': [
                 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', tag: 'Areia' },
                     // Mapas de Areia para o Mapa Verde
                    { 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', tag: 'Areia' },
                    { 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', tag: 'Areia' },
                    { id: '1004', local: 'Pancakes House', coordinates: '5616, 5555, 8', imageUrl: 'https://wiki.pokexgames.com/images/d/d1/Mapa_Verde_ADV_-_5616%2C_5555%2C_8.webp', tag: 'Areia' },
                 ],
                 ],
                 // Outras opções do Mapa Verde
                 // Outras categorias conforme necessário
             },
             },
             3: {
             3: {
                 'Areia': [
                 Areia: [
                     { id: '10001', local: 'Grotto', coordinates: '3400, 4500, 6', imageUrl: 'https://wiki.pokexgames.com/images/5/56/Mapa_Roxo_ADV_-_3400%2C_4500%2C_6.png', tag: 'Areia' },
                     // Mapas de Areia para o Mapa Roxo
                 ],
                 ],
                 // Outras opções do Mapa Roxo
                 // Outras categorias conforme necessário
             }
             }
         };
         };


         function updateFilterVisibility() {
         const mapsContainer = document.getElementById('mapsContainer');
            const enableFilter = document.getElementById('enableFilter').checked;
        const errorMessage = document.getElementById('errorMessage');
            document.getElementById('filterSection').classList.toggle('hidden', !enableFilter);
        const typeMapSelect = document.getElementById('typeMap');
            document.getElementById('specificOptions').classList.toggle('hidden', !enableFilter);
        const specificLocationSelect = document.getElementById('specificLocation');
            document.getElementById('filterByTag').classList.toggle('hidden', !enableFilter);
        const filterOptions = document.getElementById('filterOptions');
            document.getElementById('filterById').classList.toggle('hidden', !enableFilter);
        const toggleFilter = document.getElementById('toggleFilter');
         }
        const filterBySelect = document.getElementById('filterBy');
        const filterValueInput = document.getElementById('filterValue');
        const filterButton = document.getElementById('filterButton');
 
        let currentType = '';
         let currentLocation = '';


         function filterImages() {
         function updateMaps() {
             const mapType = document.getElementById('mapType').value;
             mapsContainer.innerHTML = '';
            const specificOption = document.getElementById('specificOption').value;
            const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim()).filter(id => id);
            const searchTags = document.getElementById('searchTags').value.trim().toLowerCase();


             if (!mapType && !searchTags && !searchIds.length) {
             if (!currentType || !currentLocation) {
                alert('Selecione pelo menos um tipo de mapa ou insira uma tag ou número.');
                 return;
                 return;
             }
             }


             const images = [];
             const maps = specificOptions[currentType][currentLocation] || [];
             if (mapType && specificOption) {
             maps.forEach(map => {
                 if (specificOptions[mapType] && specificOptions[mapType][specificOption]) {
                 const img = document.createElement('img');
                    images.push(...specificOptions[mapType][specificOption]);
                img.src = map.imageUrl;
                }
                img.alt = map.local;
            }
                mapsContainer.appendChild(img);
            });
        }


            if (searchIds.length) {
        function applyFilter() {
                images.push(...Object.values(specificOptions).flatMap(option => option).filter(item => searchIds.includes(item.id)));
            const filterType = filterBySelect.value;
             }
            const filterValue = filterValueInput.value.toLowerCase();
             const maps = specificOptions[currentType][currentLocation] || [];


             if (searchTags) {
             const filteredMaps = maps.filter(map => {
                images.push(...Object.values(specificOptions).flatMap(option => option).filter(item => item.tag && item.tag.toLowerCase().includes(searchTags)));
                if (filterType === 'number') {
             }
                    return map.id.includes(filterValue);
                } else if (filterType === 'tag') {
                    return map.tag.toLowerCase().includes(filterValue);
                }
                return true;
             });


             displayImages(images);
             mapsContainer.innerHTML = '';
            filteredMaps.forEach(map => {
                const img = document.createElement('img');
                img.src = map.imageUrl;
                img.alt = map.local;
                mapsContainer.appendChild(img);
            });
         }
         }


         function displayImages(images) {
         typeMapSelect.addEventListener('change', () => {
            const container = document.getElementById('imageContainer');
             currentType = typeMapSelect.value;
            container.innerHTML = '';
            updateMaps();
            if (images.length === 0) {
        });
                container.innerHTML = '<p>Nenhuma imagem encontrada.</p>';
             } else {
                images.forEach(image => {
                    const div = document.createElement('div');
                    div.className = 'image-item';
                    div.innerHTML = `
                        <img src="${image.imageUrl}" alt="${image.local}" />
                        <div class="image-info">
                            <p>ID: ${image.id}</p>
                            <p>Local: ${image.local}</p>
                            <p>Coordenadas: ${image.coordinates}</p>
                        </div>
                    `;
                    container.appendChild(div);
                });
            }
            container.classList.remove('hidden');
        }


         document.getElementById('enableFilter').addEventListener('change', updateFilterVisibility);
         specificLocationSelect.addEventListener('change', () => {
            currentLocation = specificLocationSelect.value;
            updateMaps();
        });


         document.getElementById('filterButton').addEventListener('click', filterImages);
         toggleFilter.addEventListener('change', () => {
 
            filterOptions.classList.toggle('hidden', !toggleFilter.checked);
        document.getElementById('searchIds').addEventListener('input', function () {
             if (!toggleFilter.checked) {
             document.getElementById('searchTags').value = '';
                filterValueInput.value = '';
            document.getElementById('filterByTag').classList.add('hidden');
                applyFilter();
            }
         });
         });


         document.getElementById('searchTags').addEventListener('input', function () {
         filterButton.addEventListener('click', () => {
             document.getElementById('searchIds').value = '';
             if (toggleFilter.checked) {
            document.getElementById('filterById').classList.add('hidden');
                if (!currentType || !currentLocation) {
                    errorMessage.textContent = 'Selecione pelo menos um tipo de mapa e local do X';
                    return;
                }
                errorMessage.textContent = '';
                applyFilter();
            }
         });
         });


        // Inicializa a visibilidade dos filtros ao carregar a página
        updateFilterVisibility();
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 801

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/85829”

Menu de navegação