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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(12 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 51: Linha 51:
             text-align: left;
             text-align: left;
         }
         }
.image-info p {
    margin-bottom: 6px; /* Reduz o espaço entre os parágrafos */
    margin-left: 40px;
    line-height: 1.5;
}


        .image-item img {
.image-info img {
            max-width: 100%;
    vertical-align: middle;
            height: auto;
    display: inline-block;
            cursor: pointer;  
    margin-right: 5px;
            margin-bottom: 18px;
    transform: translateY(-3px); /* Sobe a imagem 5px */
}
 
.class-icons img {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    transform: translateY(-3px); /* Sobe a imagem 5px */
}


        }


        .image-info p {
            margin-bottom: 7px;
    margin-left: 40px;
        }


         .image-item {
         .image-item {
Linha 100: Linha 109:
             align-items: center;
             align-items: center;
             gap: 10px;
             gap: 10px;
    margin-top: -5px; /* Aproxima "Clãs:" do item anterior */
         }
         }


        .class-icons {
            display: flex;
    vertical-align: middle;
    transform: translateY(7px);
            gap: 5px;
        }


         .type-dropdown {
         .type-dropdown {
Linha 382: Linha 387:
                                     <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                                     <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                                 </a>
                                 </a>
                                <div class="image-info">
<div class="image-info">
                                    <p><b>Resistência:</b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p>
    <p><b>Resistência: </b> ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}</p>
                                    <p><b>Dificuldade:</b> ${hunt.difficulty}</p>  
    <p><b>Dificuldade: </b> ${hunt.difficulty}</p>
                                    <div class="class-container">
    <p><b>Dano: </b> ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.map(type => `<img src="${typeIcons[type]}" alt="${type}" title="${type}" class="class-icon">`).join(" ")}</p>
                                    <p><b>Dano da Hunt:</b>
    <div class="class-container">
                                        <div class="class-icons">
        <p><b>Clãs: </b></p>
${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.map(type => `<img src="${typeIcons[type]}" alt="${type}" title="${type}" class="class-icon">`).join(" ")}</p>
        <div class="class-icons">
                                        </div>
            ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" title="${cls}" class="class-icon">`).join("")}
                                    <div class="class-container">
        </div>
                                        <p><b>Clãs:</b></p>
    </div>
                                        <div class="class-icons">
</div>
                                            ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" title="${cls}" class="class-icon">`).join("")}
                                        </div>
                                    </div>
                                </div>
                            </div>
                         `;
                         `;
                         imageContainer.appendChild(imageItem);
                         imageContainer.appendChild(imageItem);

Edição atual tal como às 23h16min de 23 de março de 2025

<!DOCTYPE html> <html lang="pt-BR">

<head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Seleção de Hunts</title>
   <style> 
       .borda-container {
           display: flex;
           flex-direction: column;
           padding: .5rem 2rem;
           margin: 0 auto;
           border: 42px solid transparent;
           border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
           border-image-repeat: round;
           width: 100%;
           box-sizing: border-box;
           min-height: 620px;
           overflow: hidden;
       }

       .hidden {
           display: none;
       }

       .input-group {
           margin: 20px 0;
       }

       .maps__select {
           width: 100%;
           padding: 10px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #ccc;
           background-color: #fff;
           margin-top: 15px;
           box-sizing: border-box;
       }

       .image-container {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           margin-top: 20px;
       }

       .image-item {
           flex: 1 0 30%;
           text-align: left;
       }

.image-info p { 

   margin-bottom: 6px; /* Reduz o espaço entre os parágrafos */
   margin-left: 40px;
   line-height: 1.5;

}

.image-info img { 

   vertical-align: middle;
   display: inline-block;
   margin-right: 5px;
   transform: translateY(-3px); /* Sobe a imagem 5px */

}

.class-icons img { 

   vertical-align: middle;
   display: inline-block;
   margin-right: 5px;
   transform: translateY(-3px); /* Sobe a imagem 5px */

} 



       .image-item {
           display: flex;
           justify-content: center;
           width: 100%;
       }

       .image-content {
           text-align: left;
           max-width: 400px;
           width: 100%;
           margin-bottom: 35px;

       }

       .tag-button {
           display: inline-flex;
           color: #333;
           padding: 5px 12px;
           margin: 5px;
           border-radius: 20px;
           cursor: pointer;
           font-size: 16px;
       }

       .tag-button.selected {
           background-color: #d586e1;
           color: #050000;
           border: #9d4cea solid 2px;
           font-weight: bolder;
       }

       .class-container {
           display: flex;
           align-items: center;
           gap: 10px;
   margin-top: -5px; /* Aproxima "Clãs:" do item anterior */
       }




       .type-dropdown {
           margin-top: 10px;
       }

       .disabled {
           opacity: 0.5;
           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;
       }

       .toggle-button {
           display: flex;
           align-items: center;
           gap: 5px;
           cursor: pointer;
       }

       .toggle-group {
           display: flex; 
           align-items: center; 
           gap: 10px; 
       }

       .toggle-container {
           display: flex; 
           align-items: center; 
           cursor: pointer; 
       }

       .toggle-container img {
           width: 60px; 
           height: 28px;
       }
   </style>

</head>

<body> 

           <label for="difficulty">Dificuldade:</label>
           <select id="difficulty" class="maps__select">
               <option value="">Selecione uma Dificuldade</option>
           </select>

               <label>Mostrar Hunts Neutras </label>

                   <img src="https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png" alt="Desativado"
                       id="toggleNeutroIcon">

           <label for="search">Buscar por Nome:</label>
           <input type="text" id="search" class="maps__select" placeholder="Digite o nome...">

               <img src="https://wiki.pokexgames.com/images/6/64/Volcanic1.png" alt="Clãs" class="icon-filter">

               <img src="https://wiki.pokexgames.com/images/c/c9/Steel.png" alt="Dano Recebido" class="icon-filter">

           <label>Filtro de Clãs do Jogador:</label>

   <script>
       const classIcons = {
           "Volcanic": "https://wiki.pokexgames.com/images/6/64/Volcanic1.png",
           "Raibolt": "https://wiki.pokexgames.com/images/b/b4/Raibol1t.png",
           "Orebound": "https://wiki.pokexgames.com/images/e/e2/Orebound1.png",
           "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"
       };

       const typeIcons = {
           "Steel": "https://wiki.pokexgames.com/images/c/c9/Steel.png",
           "Dragon": "https://wiki.pokexgames.com/images/c/c7/Dragon.png",
           "Fairy": "https://wiki.pokexgames.com/images/4/43/Fairy.png",
           "Psychic": "https://wiki.pokexgames.com/images/2/21/Psychic.png",
           "Fighting": "https://wiki.pokexgames.com/images/3/30/Fighting.png",
           "Ice": "https://wiki.pokexgames.com/images/7/77/Ice.png",
           "Fire": "https://wiki.pokexgames.com/images/3/30/Fire.png",
           "Rock": "https://wiki.pokexgames.com/images/0/0b/Rock.png",
           "Ground": "https://wiki.pokexgames.com/images/8/8f/Ground.png",
           "Poison": "https://wiki.pokexgames.com/images/0/03/Poison1.png",
           "Electric": "https://wiki.pokexgames.com/images/2/2f/Electric.png",
           "Water": "https://wiki.pokexgames.com/images/9/9d/Water.png",
           "Bug": "https://wiki.pokexgames.com/images/7/7d/Bug.png",
           "Grass": "https://wiki.pokexgames.com/images/c/c5/Grass.png",
           "Flying": "https://wiki.pokexgames.com/images/7/7f/Flying.png",
           "Normal": "https://wiki.pokexgames.com/images/e/e8/Normal1.png",
           "Ghost": "https://wiki.pokexgames.com/images/5/59/Ghost1.png",
           "Dark": "https://wiki.pokexgames.com/images/9/98/Dark1.png",
           "Neutral": "https://wiki.pokexgames.com/images/0/08/NeutralICON.png"
       };

       document.addEventListener("DOMContentLoaded", function () {
           const difficultySelect = document.getElementById("difficulty");
           const tagButtonsContainer = document.getElementById("tagButtons");
           const typeButtonsContainer = document.getElementById("typeButtons");
           const imageContainer = document.getElementById("imageContainer");
           const toggleNeutro = document.getElementById("toggleNeutro");
           const toggleNeutroIcon = document.getElementById("toggleNeutroIcon");
           const searchInput = document.getElementById("search");
           const switchClans = document.getElementById("switchClans");
           const switchTypes = document.getElementById("switchTypes");
           const clanFilter = document.getElementById("clanFilter");
           const typeFilter = document.getElementById("typeFilter");

           let selectedTags = [];
           let selectedTypes = [];
           let showNeutro = false;

           const neutroIconAtivado = "https://wiki.pokexgames.com/images/7/73/Vetor_Toggle_Wiki_On.png";
           const neutroIconDesativado = "https://wiki.pokexgames.com/images/2/27/Vetor_Toggle_Wiki_Off.png";

           if (!toggleNeutro || !toggleNeutroIcon) {
               console.error("Elementos do toggle não encontrados!");
               return;
           }

           toggleNeutro.addEventListener("click", () => {
               showNeutro = !showNeutro;
               toggleNeutro.classList.toggle("active");

               if (showNeutro) {
                   toggleNeutroIcon.src = neutroIconAtivado;
               } else {
                   toggleNeutroIcon.src = neutroIconDesativado;
               }

               filterHunts();
           });

           Object.entries(classIcons).forEach(([cls, icon]) => {
               const button = document.createElement("button");
               button.className = "tag-button";
               button.innerHTML = `<img src="${icon}" alt="${cls}" class="class-icon" title="${cls}">`;
               button.addEventListener("click", () => {
                   button.classList.toggle("selected");
                   selectedTags.includes(cls) ? selectedTags.splice(selectedTags.indexOf(cls), 1) : selectedTags.push(cls);
                   filterHunts();
               });
               tagButtonsContainer.appendChild(button);
           });

           Object.entries(typeIcons).forEach(([type, icon]) => {
               const button = document.createElement("button");
               button.className = "tag-button";
               button.innerHTML = `<img src="${icon}" alt="${type}" class="class-icon" title="${type}">`;
               button.addEventListener("click", () => {
                   button.classList.toggle("selected");
                   selectedTypes.includes(type) ? selectedTypes.splice(selectedTypes.indexOf(type), 1) : selectedTypes.push(type);
                   filterHunts();
               });
               typeButtonsContainer.appendChild(button);
           });

           function clearFilters() {
               document.querySelectorAll("#tagButtons .tag-button.selected").forEach(button => {
                   button.classList.remove("selected");
               });

               document.querySelectorAll("#typeButtons .tag-button.selected").forEach(button => {
                   button.classList.remove("selected");
               });
               selectedTags = [];
               selectedTypes = [];

               filterHunts();
           }

           switchClans.addEventListener("click", () => {
               clearFilters();
               clanFilter.classList.remove("hidden");
               typeFilter.classList.add("hidden");
               switchClans.classList.add("active");
               switchTypes.classList.remove("active");
           });

           switchTypes.addEventListener("click", () => {
               clearFilters();
               clanFilter.classList.add("hidden");
               typeFilter.classList.remove("hidden");
               switchClans.classList.remove("active");
               switchTypes.classList.add("active");
           });

           searchInput.addEventListener("input", () => {
               filterHunts();
           });

           function filterHunts() {
               const selectedDifficulty = difficultySelect.value;
               const searchTerm = searchInput.value.toLowerCase();
               imageContainer.innerHTML = "";

               // Se nenhuma dificuldade for selecionada, não exibe nada
               if (!selectedDifficulty) {
                   return;
               }

               const huntList = hunts["NW"]; // Assume que a database é sempre "NW"
               huntList.forEach(hunt => {
                   const hasAllClasses = hunt.classes.includes("Todos");
                   const hasAllTypes = hunt.huntTypes.includes("Todos");

                   const matchesTags = hasAllClasses || selectedTags.length === 0 || selectedTags.some(tag => hunt.classes.includes(tag));

                   const matchesTypes = hasAllTypes || selectedTypes.length === 0 || selectedTypes.some(type => hunt.huntTypes.includes(type));

                   const matchesDifficulty = hunt.difficulty === selectedDifficulty;

                   const isNeutro = hunt.huntTipo === "Neutro";

                   const matchesSearch = hunt.name.toLowerCase().includes(searchTerm) || (hunt.altName && hunt.altName.toLowerCase().includes(searchTerm));

                   if (matchesTags && matchesTypes && matchesDifficulty && (!isNeutro || (isNeutro && showNeutro)) && matchesSearch) {
                       const imageItem = document.createElement("div");
                       imageItem.className = "image-item";
                       imageItem.innerHTML = `

                               <a href="${hunt.link}" target="_blank">
                                   <img src="${hunt.imageUrl}" alt="${hunt.name}" title="Clique para mais informações">
                               </a>

Resistência: ${Array.isArray(hunt.local) ? hunt.local.join(", ") : hunt.local}

Dificuldade: ${hunt.difficulty}

Dano: ${hunt.huntTypes.includes("Todos") ? "Todos" : hunt.huntTypes.map(type => `<img src="${typeIcons[type]}" alt="${type}" title="${type}" class="class-icon">`).join(" ")}

Clãs: 

           ${hunt.classes.includes("Todos") ? "Todos" : hunt.classes.map(cls => `<img src="${classIcons[cls]}" alt="${cls}" title="${cls}" class="class-icon">`).join("")}

                       `;
                       imageContainer.appendChild(imageItem);
                   }
               });
           }

           difficultySelect.addEventListener("change", filterHunts);

           // Preenche as dificuldades disponíveis
           const difficulties = new Set(hunts["NW"].map(hunt => hunt.difficulty));
           difficulties.forEach(difficulty => {
               const option = document.createElement("option");
               option.value = difficulty;
               option.textContent = difficulty;
               difficultySelect.appendChild(option);
           });

           // Não exibe as hunts inicialmente (só após selecionar uma dificuldade)
           imageContainer.innerHTML = "";
       });
   </script>

</body>

</html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test4&oldid=98641”