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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

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

1 500 bytes adicionados ,  27 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 6: Linha 6:
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
        /* Estilos conforme fornecidos */
         .d-flex {
         .d-flex {
             display: flex;
             display: flex;
Linha 12: 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 */
         }
         }


Linha 32: Linha 34:


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


Linha 84: Linha 94:
             position: absolute;
             position: absolute;
             top: -18px;
             top: -18px;
            /* Eleva o texto para cima */
             background: none;
             background: none;
             padding: 0 5px;
             padding: 0 5px;
Linha 93: Linha 104:
         .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 99: Linha 111:
             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 109: Linha 124:
             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 114: Linha 130:
             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 123: Linha 141:
         .hover-minimize:hover {
         .hover-minimize:hover {
             transform: scale(0.95);
             transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
         }
         }


Linha 134: Linha 153:
             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 140: Linha 162:
         .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>
     <div class="container">
     <div class="d-flex">
         <div class="filters">
        <!-- Filtros -->
        <div class="input-group">
            <label for="mapType" class="maps__label">Tipo de Mapa</label>
            <select id="mapType" class="maps__select">
                <option value="">Selecione o Tipo de Mapa</option>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
        </div>
 
        <div class="input-group">
            <label for="location" class="maps__label">Local do X</label>
            <select id="location" class="maps__select">
                <option value="">Selecione o Local do X</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
        </div>
 
         <div class="input-group">
            <label for="filterCheckbox" class="filter-label">
                <input type="checkbox" id="filterCheckbox"> Ativar Filtro
            </label>
        </div>
 
        <div id="filterOptions" class="hidden">
             <div class="input-group">
             <div class="input-group">
                 <label for="typeMap" class="maps__label">Tipo de Mapa:</label>
                 <label for="filterOption" class="maps__label">Filtrar Por</label>
                 <select id="typeMap" class="maps__select">
                 <select id="filterOption" class="maps__select">
                     <option value="">Selecione um tipo</option>
                     <option value="">Escolha uma Opção</option>
                     <option value="1">Mapa Vermelho</option>
                     <option value="number">Filtrar por Número</option>
                     <option value="2">Mapa Verde</option>
                     <option value="tag">Filtrar por Tag</option>
                    <option value="3">Mapa Roxo</option>
                 </select>
                 </select>
             </div>
             </div>
             <div class="input-group">
             <div class="input-group">
                <label for="specificLocation" class="maps__label">Local do X:</label>
                 <input type="text" id="filterValue" placeholder="Digite o valor para filtrar">
                <select id="specificLocation" class="maps__select">
                <button id="filterButton">
                    <option value="">Selecione um local</option>
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Filtrar">
                    <option value="Areia">Areia</option>
                </button>
                    <option value="Gelo">Gelo</option>
                    <option value="Grama">Grama</option>
                    <option value="Pedra">Pedra</option>
                    <option value="Subaquático">Subaquático</option>
                    <option value="Terra">Terra</option>
                    <option value="Pisos">Pisos</option>
                </select>
            </div>
 
            <div class="filter-container">
                 <input type="checkbox" id="toggleFilter">
                <label for="toggleFilter" class="filter-label">Ativar Filtro</label>
            </div>
 
            <div id="filterOptions" class="hidden">
                <div class="input-group">
                     <label for="filterBy" class="maps__label">Filtrar por:</label>
                    <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="input-group">
                    <input type="text" id="filterValue" placeholder="Digite o valor">
                    <button id="filterButton" class="hover-minimize">Filtrar</button>
                </div>
             </div>
             </div>
         </div>
         </div>
    </div>


        <div id="mapsContainer" class="image-container"></div>
    <div id="mapContainer" class="image-container"></div>
 
        <div id="errorMessage" class="error-message"></div>
    </div>


     <script>
     <script>
         const specificOptions = {
         const specificOptions = {
             1: {
             1: { // Mapa Vermelho
                 Areia: [
                 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: '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' }
                     // Adicione mais mapas conforme necessário
                 ],
                 ],
                 Gelo: [
                 Gelo: [],
                    // Mapas de Gelo para o Mapa Vermelho
                Grama: [],
                 ],
                Pedra: [],
                 // Outras categorias conforme necessário
                Subaquático: [],
                 Terra: [],
                 Pisos: []
             },
             },
             2: {
             2: { // Mapa Verde
                 Areia: [
                 Areia: [
                     // Mapas de Areia para o Mapa Verde
                     { id: '7008', local: 'Praia da Areia', coordinates: '4500, 5000, 8', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png' }
                    // Adicione mais mapas conforme necessário
                 ],
                 ],
                 // Outras categorias conforme necessário
                 Gelo: [],
                Grama: [],
                Pedra: [],
                Subaquático: [],
                Terra: [],
                Pisos: []
             },
             },
             3: {
             3: { // Mapa Roxo
                 Areia: [
                 Areia: [],
                    // Mapas de Areia para o Mapa Roxo
                Gelo: [],
                 ],
                Grama: [],
                 // Outras categorias conforme necessário
                Pedra: [],
                Subaquático: [],
                 Terra: [],
                 Pisos: []
             }
             }
         };
         };


         const mapsContainer = document.getElementById('mapsContainer');
         const mapTypeSelect = document.getElementById('mapType');
         const errorMessage = document.getElementById('errorMessage');
         const locationSelect = document.getElementById('location');
         const typeMapSelect = document.getElementById('typeMap');
         const filterCheckbox = document.getElementById('filterCheckbox');
        const specificLocationSelect = document.getElementById('specificLocation');
         const filterOptions = document.getElementById('filterOptions');
         const filterOptions = document.getElementById('filterOptions');
         const toggleFilter = document.getElementById('toggleFilter');
         const filterOptionSelect = document.getElementById('filterOption');
        const filterBySelect = document.getElementById('filterBy');
         const filterValueInput = document.getElementById('filterValue');
         const filterValueInput = document.getElementById('filterValue');
         const filterButton = document.getElementById('filterButton');
         const filterButton = document.getElementById('filterButton');
        const mapContainer = document.getElementById('mapContainer');


         let currentType = '';
         const updateMaps = () => {
        let currentLocation = '';
            const selectedType = mapTypeSelect.value;
            const selectedLocation = locationSelect.value;
            const shouldFilter = filterCheckbox.checked;
            const filterOption = filterOptionSelect.value;
            const filterValue = filterValueInput.value.trim().toLowerCase();


        function updateMaps() {
             mapContainer.innerHTML = ''; // Limpa o container de mapas
             mapsContainer.innerHTML = '';


             if (!currentType || !currentLocation) {
             if (selectedType && selectedLocation) {
                 return;
                const maps = specificOptions[selectedType][selectedLocation] || [];
                const filteredMaps = maps.filter(map => {
                    if (shouldFilter) {
                        if (filterOption === 'number' && filterValue) {
                            return map.id === filterValue;
                        }
                        if (filterOption === 'tag' && filterValue) {
                            return map.tag.toLowerCase().includes(filterValue);
                        }
                    }
                    return true; // Exibe todos os mapas se o filtro não estiver ativado ou não houver filtro
                });
 
                filteredMaps.forEach(map => {
                    const mapElement = document.createElement('div');
                    mapElement.className = 'image-item';
                    mapElement.innerHTML = `
                        <img src="${map.imageUrl}" alt="${map.local}">
                        <div class="image-info">
                            <p>ID: ${map.id}</p>
                            <p>Local: ${map.local}</p>
                            <p>Coordenadas: ${map.coordinates}</p>
                            <p>Tag: ${map.tag}</p>
                        </div>
                    `;
                    mapContainer.appendChild(mapElement);
                 });
             }
             }
        };


            const maps = specificOptions[currentType][currentLocation] || [];
        mapTypeSelect.addEventListener('change', updateMaps);
            maps.forEach(map => {
         locationSelect.addEventListener('change', updateMaps);
                const img = document.createElement('img');
        filterCheckbox.addEventListener('change', () => {
                img.src = map.imageUrl;
            filterOptions.classList.toggle('hidden', !filterCheckbox.checked);
                img.alt = map.local;
                mapsContainer.appendChild(img);
            });
         }
 
        function applyFilter() {
            const filterType = filterBySelect.value;
            const filterValue = filterValueInput.value.toLowerCase();
            const maps = specificOptions[currentType][currentLocation] || [];
 
            const filteredMaps = maps.filter(map => {
                if (filterType === 'number') {
                    return map.id.includes(filterValue);
                } else if (filterType === 'tag') {
                    return map.tag.toLowerCase().includes(filterValue);
                }
                return true;
            });
 
            mapsContainer.innerHTML = '';
            filteredMaps.forEach(map => {
                const img = document.createElement('img');
                img.src = map.imageUrl;
                img.alt = map.local;
                mapsContainer.appendChild(img);
            });
        }
 
        typeMapSelect.addEventListener('change', () => {
            currentType = typeMapSelect.value;
             updateMaps();
             updateMaps();
         });
         });
 
         filterOptionSelect.addEventListener('change', updateMaps);
         specificLocationSelect.addEventListener('change', () => {
         filterValueInput.addEventListener('input', updateMaps);
            currentLocation = specificLocationSelect.value;
         filterButton.addEventListener('click', updateMaps);
            updateMaps();
         });
 
        toggleFilter.addEventListener('change', () => {
            filterOptions.classList.toggle('hidden', !toggleFilter.checked);
            if (!toggleFilter.checked) {
                filterValueInput.value = '';
                applyFilter();
            }
        });
 
         filterButton.addEventListener('click', () => {
            if (toggleFilter.checked) {
                if (!currentType || !currentLocation) {
                    errorMessage.textContent = 'Selecione pelo menos um tipo de mapa e local do X';
                    return;
                }
                errorMessage.textContent = '';
                applyFilter();
            }
        });
 
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 801

edições

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

Menu de navegação