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

Ir para navegação Ir para pesquisar

Widget:Test4 (ver código-fonte)

Edição das 00h01min de 18 de março de 2025

1 778 bytes adicionados ,  18 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 */
 
  .switch {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        transform: translateX(14px);
    }
    .hidden {
        display: none;
    }
  .filter-container {
  .filter-container {
         display: flex;
         display: flex;
Linha 153: Linha 194:
     </div>
     </div>


<div class="filter-container">
<label class="switch">
     <div id="classFilter" class="filter-group">
    <input type="checkbox" id="filterToggle">
        <p><b>Filtrar por Clãs:</b></p>
     <span class="slider round"></span>
        <div class="filter-icons"></div>
</label>
    </div>
<span id="filterLabel">Filtrar por Clãs</span>
    <div id="typeFilter" class="filter-group">
 
        <p><b>Filtrar por Tipo:</b></p>
<div id="clanFilters" class="filter-group">
        <div class="filter-icons"></div>
    <button class="tag-button" data-filter="Volcanic"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic"></button>
    </div>
    <button class="tag-button" data-filter="Raibolt"><img src="https://wiki.pokexgames.com/images/b/b4/Raibol1t.png" alt="Raibolt"></button>
</div>
 
<div id="typeFilters" class="filter-group hidden">
    <button class="tag-button" data-filter="Poison"><img src="https://example.com/poison.png" alt="Poison"></button>
    <button class="tag-button" data-filter="Grass"><img src="https://example.com/grass.png" alt="Grass"></button>
</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 202: Linha 249:
         "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
         "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
     };
     };
    document.getElementById("filterToggle").addEventListener("change", function() {
        const isClanFilter = this.checked;
        document.getElementById("filterLabel").textContent = isClanFilter ? "Filtrar por Clãs" : "Filtrar por Tipo";
        document.getElementById("clanFilters").classList.toggle("hidden", !isClanFilter);
        document.getElementById("typeFilters").classList.toggle("hidden", isClanFilter);
    });


     document.addEventListener("DOMContentLoaded", function () {
     document.addEventListener("DOMContentLoaded", function () {
Renee
Administradores
7 894

edições

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

Menu de navegação