PokeXGames

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

Widget Discussão

Widget:Test4 (ver código-fonte)

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

2 549 bytes removidos ,  18 março
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 5: Linha 5:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção de Hunts</title>
     <title>Seleção de Hunts</title>
     <style>
     <style>  
        /* 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 {
        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 85: Linha 15:
             border-image-repeat: round;
             border-image-repeat: round;
             width: 100%;
             width: 100%;
             box-sizing: border-box; /* Inclui a borda no cálculo da largura */
             box-sizing: border-box;
             min-height: 620px;
             min-height: 620px;
             overflow: hidden; /* Evita que o conteúdo ultrapasse os limites */
             overflow: hidden;
         }
         }


         .hidden {
         .hidden {
             display: none;
             display: none;
         }  
         }
 
         .input-group {
         .input-group {
             margin: 20px 0;
             margin: 20px 0;
         }
         }
         .maps__select {
         .maps__select {
             width: 100%;
             width: 100%;
Linha 106: Linha 38:
             box-sizing: border-box;
             box-sizing: border-box;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
Linha 112: Linha 45:
             margin-top: 20px;
             margin-top: 20px;
         }
         }
         .image-item {
         .image-item {
             flex: 1 0 30%;
             flex: 1 0 30%;
             text-align: left;
             text-align: left;
         }
         }
         .image-item img {
         .image-item img {
             max-width: 100%;
             max-width: 100%;
Linha 121: Linha 56:
             cursor: pointer;
             cursor: pointer;
         }
         }
         .image-info p {
         .image-info p {
          margin: 5px 0;
            margin: 5px 0;
        }
 
        .image-item {
            display: flex;
            justify-content: center;
            width: 100%;
        }
 
        .image-content {
            text-align: left;
            max-width: 400px;
            width: 100%;
         }
         }
.image-item {
    display: flex;
    justify-content: center; /* Centraliza o card */
    width: 100%; /* Garante que ele ocupe o espaço necessário */
}


.image-content {
    text-align: left; /* Mantém o texto alinhado à esquerda */
    max-width: 400px; /* Ajuste conforme necessário para o tamanho do card */
    width: 100%;
}
         .tag-button {
         .tag-button {
             display: inline-flex;
             display: inline-flex;
Linha 144: Linha 82:
             font-size: 16px;
             font-size: 16px;
         }
         }
         .tag-button.selected {
         .tag-button.selected {
             background-color: #d586e1;
             background-color: #d586e1;
Linha 150: Linha 89:
             font-weight: bolder;
             font-weight: bolder;
         }
         }
.class-container {
    display: flex;
    align-items: center;
    gap: 10px;
}


.class-icons {
        .class-container {
    display: flex;
            display: flex;
    gap: 5px; /* Espaçamento entre os ícones */
            align-items: center;
}
            gap: 10px;
        }
 
        .class-icons {
            display: flex;
            gap: 5px;
        }
 
         .type-dropdown {
         .type-dropdown {
             margin-top: 10px;
             margin-top: 10px;
         }
         }
         .disabled {
         .disabled {
             opacity: 0.5;
             opacity: 0.5;
             pointer-events: none;
             pointer-events: none;
        }
        .switch-container {
            display: flex;
            gap: 10px;
            margin: 20px 0;
        }
        .switch-button {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .switch-button.active {
            background-color: #d586e1;
            border-color: #9d4cea;
        }
        .icon-filter {
            width: 24px;
            height: 24px;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
    <!-- Container específico para a borda -->
     <div class="borda-container">
     <div class="borda-container">
    <div class="input-group">
        <div class="input-group">
        <label for="mapType"><b>Local da Hunt:</b></label>
            <label for="mapType"><b>Local da Hunt:</b></label>
        <select id="mapType" class="maps__select">
            <select id="mapType" class="maps__select">
            <option value="">Selecione um local</option>
                <option value="">Selecione um local</option>
            <option value="NW">NW</option>  
                <option value="NW">NW</option>
         </select>
            </select>
    </div>
         </div>
 
        <div class="input-group">
            <label for="huntTipo"><b>Tipo de Hunt:</b></label>
            <select id="huntTipo" class="maps__select disabled">
                <option value="">Selecione um tipo</option>
            </select>
        </div>
 
        <div class="input-group">
            <label for="difficulty"><b>Dificuldade:</b></label>
            <select id="difficulty" class="maps__select">
                <option value="">Selecione uma Dificuldade</option>
            </select>
        </div>
 
        <!-- Switch Button para alternar entre Clãs e Tipos -->
        <div class="switch-container">
            <div class="switch-button" id="switchClans">
                <img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Clãs" class="icon-filter">
                <span>Clãs</span>
            </div>
            <div class="switch-button" id="switchTypes">
                <img src="https://via.placeholder.com/24" alt="Tipos" class="icon-filter">
                <span>Tipos</span>
            </div>
        </div>
 
        <!-- Filtro de Clãs (ícones) -->
        <div id="clanFilter" class="input-group">
            <label><b>Clãs:</b></label>
            <div id="tagButtons"></div>
        </div>
 
        <!-- Filtro de Tipos (ícones) -->
        <div id="typeFilter" class="input-group hidden">
            <label><b>Tipos:</b></label>
            <div id="typeButtons"></div>
        </div>


    <div class="input-group">
        <div id="imageContainer" class="image-container"></div>
        <label for="huntTipo"><b>Tipo de Hunt:</b></label>
        <select id="huntTipo" class="maps__select disabled">
            <option value="">Selecione um tipo</option>
        </select>
     </div>
     </div>


     <div class="input-group">
     <script>
        <label for="difficulty"><b>Dificuldade:</b></label>
        const hunts = {
        <select id="difficulty" class="maps__select ">
            "NW": [
            <option value="">Selecione uma Dificuldade</option>
                { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
         </select>
                { name: "Petilil", difficulty: "ssss", local: "Fuchsia", classes: ["Volcanic", "Naturia", "Malefic", "Seavell", "Wingeon"], imageUrl: "https://wiki.pokexgames.com/images/7/70/Nightmare_Hunt_Petilil.png", hasType: true, huntTypes: ["Grass"], huntTipo: "Neutro", link: "https://exemplo.com/hunt2" }
    </div>
            ],
         };


<label class="switch">
        const classIcons = {
    <input type="checkbox" id="filterToggle">
            "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
    <span class="slider round"></span>
            "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
</label>
            "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
<span id="filterLabel">Filtrar por Clãs</span>
            "Naturia": "https://wiki.pokexgames.com/images/3/30/Naturia1.png",
            "Gardestrike": "https://wiki.pokexgames.com/images/3/39/Gardestrike1.png",
            "Ironhard": "https://wiki.pokexgames.com/images/9/9a/Ironhard1.png",
            "Wingeon": "https://wiki.pokexgames.com/images/0/0c/Wingeon1.png",
            "Psycraft": "https://wiki.pokexgames.com/images/5/59/Psycraft1.png",
            "Seavell": "https://wiki.pokexgames.com/images/2/2c/Seave1ll.png",
            "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
        };


<div id="clanFilters" class="filter-group">
        const typeIcons = {
    <button class="tag-button" data-filter="Volcanic"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic"></button>
            "Poison": "https://via.placeholder.com/24",
    <button class="tag-button" data-filter="Raibolt"><img src="https://wiki.pokexgames.com/images/b/b4/Raibol1t.png" alt="Raibolt"></button>
            "Grass": "https://via.placeholder.com/24"
</div>
        };


<div id="typeFilters" class="filter-group hidden">
        document.addEventListener("DOMContentLoaded", function () {
    <button class="tag-button" data-filter="Poison"><img src="https://example.com/poison.png" alt="Poison"></button>
            const mapTypeSelect = document.getElementById("mapType");
    <button class="tag-button" data-filter="Grass"><img src="https://example.com/grass.png" alt="Grass"></button>
            const huntTipoSelect = document.getElementById("huntTipo");
</div>
            const difficultySelect = document.getElementById("difficulty");
            const tagButtonsContainer = document.getElementById("tagButtons");
            const typeButtonsContainer = document.getElementById("typeButtons");
            const imageContainer = document.getElementById("imageContainer");
            const switchClans = document.getElementById("switchClans");
            const switchTypes = document.getElementById("switchTypes");
            const clanFilter = document.getElementById("clanFilter");
            const typeFilter = document.getElementById("typeFilter");


<div id="tagButtons">
            let selectedTags = [];
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Volcanic" class="class-icon"></button>
            let selectedTypes = [];
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/b/b4/Raibol1t.png" alt="Raibolt" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/e/e2/Orebound1.png" alt="Orebound" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/3/30/Naturia1.png" alt="Naturia" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/3/39/Gardestrike1.png" alt="Gardestrike" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/9/9a/Ironhard1.png" alt="Ironhard" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/0/0c/Wingeon1.png" alt="Wingeon" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/5/59/Psycraft1.png" alt="Psycraft" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/2/2c/Seave1ll.png" alt="Seavell" class="class-icon"></button>
    <button class="tag-button"><img src="https://wiki.pokexgames.com/images/5/56/Malefi1c.png" alt="Malefic" class="class-icon"></button>
</div>
    <div id="imageContainer" class="image-container"></div>


  </div>
            // Inicializa os botões de clãs
<script>
            Object.entries(classIcons).forEach(([cls, icon]) => {
    const hunts = {
                const button = document.createElement("button");
        "NW": [
                button.className = "tag-button";
            { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon">`;
            { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                button.addEventListener("click", () => {
            { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                    button.classList.toggle("selected");
            { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                    selectedTags.includes(cls) ? selectedTags.splice(selectedTags.indexOf(cls), 1) : selectedTags.push(cls);
            { name: "Grimer", difficulty: "Baixa", local: "Cinnabar", classes: ["Orebound", "Psycraft"], imageUrl: "https://wiki.pokexgames.com/images/e/ee/Banner_Hunts_-_NW_Grimer.png", hasType: true, huntTypes: ["Poison"], huntTipo: "Elemental", link: "https://wiki.pokexgames.com/index.php/Cosmic_Quest_-_Boss_Solrock" },
                    filterHunts();
            { name: "Petilil", difficulty: "ssss", local: "Fuchsia", classes: ["Volcanic", "Naturia", "Malefic", "Seavell", "Wingeon"], imageUrl: "https://wiki.pokexgames.com/images/7/70/Nightmare_Hunt_Petilil.png", hasType: true, huntTypes: ["Grass"], huntTipo: "Neutro", link: "https://exemplo.com/hunt2" }
                });
        ],
                tagButtonsContainer.appendChild(button);
    };
            });


    const classIcons = {
            // Inicializa os botões de tipos
        "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
            Object.entries(typeIcons).forEach(([type, icon]) => {
        "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
                const button = document.createElement("button");
        "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
                button.className = "tag-button";
        "Naturia": "https://wiki.pokexgames.com/images/3/30/Naturia1.png",
                button.innerHTML = `<img src="${icon}" alt="${type}" class="class-icon">`;
        "Gardestrike": "https://wiki.pokexgames.com/images/3/39/Gardestrike1.png",
                button.addEventListener("click", () => {
        "Ironhard": "https://wiki.pokexgames.com/images/9/9a/Ironhard1.png",
                    button.classList.toggle("selected");
        "Wingeon": "https://wiki.pokexgames.com/images/0/0c/Wingeon1.png",
                    selectedTypes.includes(type) ? selectedTypes.splice(selectedTypes.indexOf(type), 1) : selectedTypes.push(type);
        "Psycraft": "https://wiki.pokexgames.com/images/5/59/Psycraft1.png",
                    filterHunts();
        "Seavell": "https://wiki.pokexgames.com/images/2/2c/Seave1ll.png",
                });
        "Malefic": "https://wiki.pokexgames.com/images/5/56/Malefi1c.png"
                typeButtonsContainer.appendChild(button);
    };
            });


    document.getElementById("filterToggle").addEventListener("change", function() {
            // Alterna entre Clãs e Tipos
        const isClanFilter = this.checked;
            switchClans.addEventListener("click", () => {
        document.getElementById("filterLabel").textContent = isClanFilter ? "Filtrar por Clãs" : "Filtrar por Tipo";
                switchClans.classList.add("active");
        document.getElementById("clanFilters").classList.toggle("hidden", !isClanFilter);
                switchTypes.classList.remove("active");
        document.getElementById("typeFilters").classList.toggle("hidden", isClanFilter);
                clanFilter.classList.remove("hidden");
    });
                typeFilter.classList.add("hidden");
                filterHunts();
            });


    document.addEventListener("DOMContentLoaded", function () {
            switchTypes.addEventListener("click", () => {
        const mapTypeSelect = document.getElementById("mapType");
                switchTypes.classList.add("active");
        const huntTipoSelect = document.getElementById("huntTipo");
                switchClans.classList.remove("active");
        const difficultySelect = document.getElementById("difficulty");
                typeFilter.classList.remove("hidden");
        const tagButtons = document.querySelectorAll(".tag-button");
                clanFilter.classList.add("hidden");
        const imageContainer = document.getElementById("imageContainer");
                filterHunts();
        let selectedTags = [];
            });


         // Atualiza o dropdown de tipo de hunt com base no local selecionado
         // Atualiza o dropdown de tipo de hunt com base no local selecionado
Linha 315: Linha 323:
             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/98236”