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

Ir para navegação Ir para pesquisar

Widget:Test4 (ver código-fonte)

Edição das 23h58min de 17 de março de 2025

2 049 bytes adicionados ,  17 março
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 7: Linha 7:
     <style>
     <style>
         /* Container específico para a borda */
         /* Container específico para a borda */
.filter-container {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
    }
    .filter-group {
        text-align: center;
    }
    .filter-icons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .toggle-button {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 5px;
    }
    .toggle-button.selected {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 50%;
    }
    .toggle-icon {
        width: 40px;
        height: 40px;
    }
         .borda-container {
         .borda-container {
             display: flex;
             display: flex;
Linha 125: Linha 153:
     </div>
     </div>


     <div class="input-group">
<div class="filter-container">
         <label for="tagButtons"><b>Clãs:</b></label>
     <div id="classFilter" class="filter-group">
     </div>    
         <p><b>Filtrar por Clãs:</b></p>
 
        <div class="filter-icons"></div>
    </div>
    <div id="typeFilter" class="filter-group">
        <p><b>Filtrar por Tipo:</b></p>
        <div class="filter-icons"></div>
     </div>
</div>
<div id="tagButtons">
<div id="tagButtons">
     <button class="tag-button"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic" class="class-icon"></button>
     <button class="tag-button"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic" class="class-icon"></button>
Linha 227: Linha 261:
             filterHunts(); // Filtra as hunts ao mudar o tipo
             filterHunts(); // Filtra as hunts ao mudar o tipo
         });
         });
  const classFilterContainer = document.querySelector("#classFilter .filter-icons");
    const typeFilterContainer = document.querySelector("#typeFilter .filter-icons");
    let selectedClasses = [];
    let selectedTypes = [];
    function createToggleButton(container, items, selectedArray) {
        container.innerHTML = "";
        Object.entries(items).forEach(([key, imgSrc]) => {
            const button = document.createElement("button");
            button.classList.add("toggle-button");
            button.innerHTML = `<img src="${imgSrc}" alt="${key}" class="toggle-icon">`;
           
            button.addEventListener("click", function () {
                button.classList.toggle("selected");
                if (selectedArray.includes(key)) {
                    selectedArray.splice(selectedArray.indexOf(key), 1);
                } else {
                    selectedArray.push(key);
                }
                filterHunts();
            });
           
            container.appendChild(button);
        });
    }
    createToggleButton(classFilterContainer, classIcons, selectedClasses);
    createToggleButton(typeFilterContainer, { "Poison": "https://link-to-icon.png", "Grass": "https://link-to-icon.png" }, selectedTypes);


         // Filtra e exibe as hunts
         // Filtra e exibe as hunts
Renee
Administradores
7 895

edições

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

Menu de navegação