PokeXGames

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

Widget Discussão

Widget:Test (ver código-fonte)

Edição das 16h22min de 24 de agosto de 2024

897 bytes adicionados ,  24 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
Linha 6: Linha 7:
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
.d-flex {
        .d-flex {
    display: flex;
            display: flex;
    justify-content: center;
            justify-content: center;
    align-items: center;
            align-items: center;
    flex-direction: column;
            flex-direction: column;
    margin-top: -15px; /* Ajuste este valor conforme necessário para subir o botão */
            margin-top: -15px;
}
            /* Ajuste este valor conforme necessário para subir o botão */
        }


         .hidden {
         .hidden {
             display: none;
             display: none;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
Linha 24: Linha 27:
             margin-top: 5px;
             margin-top: 5px;
         }
         }
         .image-container .image-item {
         .image-container .image-item {
             flex: 1 0 30%;
             flex: 1 0 30%;
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-container img {
             width: 320px;  
             width: 320px;
             margin-bottom: 5px;
             margin-bottom: 5px;
         }
         }
         .image-info {
         .image-info {
             margin-top: 5px;
             margin-top: 5px;
         }
         }
         select, input[type="text"], button {
 
         select,
        input[type="text"],
        button {
             margin: 5px;
             margin: 5px;
         }
         }
         #filterButton, #searchButton {
 
             background: none; /* Remove o fundo do botão */
         #filterButton,
             border: none; /* Remove a borda do botão */
        #searchButton {
             padding: 0; /* Remove o padding do botão */
             background: none;
             cursor: pointer; /* Mostra o cursor de ponteiro ao passar sobre o botão */
            /* Remove o fundo do botão */
             margin-top: 5px; /* Ajuste a margem superior para subir o botão */
             border: none;
            /* Remove a borda do botão */
             padding: 0;
            /* Remove o padding do botão */
             cursor: pointer;
            /* Mostra o cursor de ponteiro ao passar sobre o botão */
             margin-top: 5px;
            /* Ajuste a margem superior para subir o botão */
         }
         }
         #filterButton img, #searchButton img {
 
         #filterButton img,
        #searchButton img {
             border-radius: 12px;
             border-radius: 12px;
             width: auto; /* Garante que a largura se ajuste ao tamanho original da imagem */
             width: auto;
             height: auto; /* Garante que a altura se ajuste ao tamanho original da imagem */
            /* Garante que a largura se ajuste ao tamanho original da imagem */
             height: auto;
            /* Garante que a altura se ajuste ao tamanho original da imagem */
         }
         }
         .mw-body-content {
         .mw-body-content {
          display: flex;
            display: flex;
         }
         }
         .mw-parser-output {
         .mw-parser-output {
          display: inline-block;
            display: inline-block;
          padding: .5rem 2rem;
            padding: .5rem 2rem;
          margin: 0 auto;
            margin: 0 auto;
          border: 30px solid transparent;
            border: 30px solid transparent;
          border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
            border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
        }
 
        .input-group {
            position: relative;
            margin: 20px 0;
            /* Ajuste a margem para mover o campo para cima */
        }
 
        .input-group label {
            position: absolute;
            top: -18px;
            /* Eleva o texto para cima */
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .maps__select {
            width: 100%;
            /* Mantém a largura total disponível */
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
            /* Adiciona um fundo branco */
            box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
         }
         }
.input-group {
    position: relative;
    margin: 20px 0; /* Ajuste a margem para mover o campo para cima */
}


.input-group label {
    position: absolute;
    top: -18px; /* Eleva o texto para cima */
    background: none;
    padding: 0 5px;
    font-size: 14px;
    font-weight: bold;
    color: #0d0d0d;
}
.maps__select {
    width: 100%; /* Mantém a largura total disponível */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    background-color: #fff; /* Adiciona um fundo branco */
    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%; /* Mantém a largura total disponível */
            width: 100%;
    padding: 10px;
            /* Mantém a largura total disponível */
    font-size: 16px;
            padding: 10px;
    border-radius: 5px;
            font-size: 16px;
    border: 1px solid #ccc;
            border-radius: 5px;
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
            border: 1px solid #ccc;
}
            box-sizing: border-box;
            /* Inclui o padding e a borda na largura total */
        }
 
         .maps__label {
         .maps__label {
             position: absolute;
             position: absolute;
             top: -18px; /* Eleva o texto um pouco mais para cima */
             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; /* Deixa o texto em negrito */
             font-weight: bold;
            /* Deixa o texto em negrito */
             color: #0d0d0d;
             color: #0d0d0d;
         }
         }
         .hover-minimize:hover {
         .hover-minimize:hover {
             transform: scale(0.95); /* Adiciona um efeito de minimizar ao passar o mouse */
             transform: scale(0.95);
            /* Adiciona um efeito de minimizar ao passar o mouse */
         }
         }
.filter-container {
    display: flex;
    align-items: center;


}
        .filter-container {
            display: flex;
            align-items: center;


.filter-container input[type="checkbox"] {
        }
    margin: 0;
    padding: 0;
    width: auto; /* Ajusta o tamanho da checkbox conforme necessário */
    height: auto; /* Ajusta o tamanho da checkbox conforme necessário */
    /* Alinha verticalmente a checkbox com o texto */
    vertical-align: middle;
}


.filter-label {
        .filter-container input[type="checkbox"] {
    margin-left: 10px; /* Espaço entre a checkbox e o texto */
            margin: 0;
    font-size: 14px;
            padding: 0;
    font-weight: bold;
            width: auto;
    color: #0d0d0d;
            /* Ajusta o tamanho da checkbox conforme necessário */
    line-height: 1.5; /* Ajusta a altura da linha para um alinhamento adequado */
            height: auto;
}
            /* Ajusta o tamanho da checkbox conforme necessário */
            /* Alinha verticalmente a checkbox com o texto */
            vertical-align: middle;
        }


        .filter-label {
            margin-left: 10px;
            /* Espaço entre a checkbox e o texto */
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
            line-height: 1.5;
            /* Ajusta a altura da linha para um alinhamento adequado */
        }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <form id="mapForm">
Linha 156: Linha 197:
             <label class="maps__label" for="specificOption">Local do X</label>
             <label class="maps__label" for="specificOption">Local do X</label>
         </div>
         </div>
<div class="filter-container">
        <div class="filter-container">
    <input type="checkbox" id="enableFilter">
            <input type="checkbox" id="enableFilter">
    <label for="enableFilter" class="filter-label">Ativar filtro</label>
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
</div>
        </div>


         <div id="filterSection" class="hidden">
         <div id="filterSection" class="hidden">
             <div id="filterById" class="input-group">
             <div id="filterById" class="input-group">
                 <label for="searchIds" class="mapsCalc__label">Buscar por ID(s):</label>
                 <label for="searchIds" class="mapsCalc__label">Buscar por ID(s):</label>
                 <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula" class="mapsCalc__select">
                 <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula"
                    class="mapsCalc__select">
             </div>
             </div>


             <div class="d-flex justify-center align-center flex-column">
             <div class="d-flex justify-center align-center flex-column">
                 <button type="button" id="filterButton" class="hover-minimize">
                 <button type="button" id="filterButton" class="hover-minimize">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png"
                        alt="Imagem botão filtrar">
                 </button>
                 </button>
             </div>
             </div>
Linha 198: Linha 241:
             }
             }
         };
         };
       
document.getElementById('enableFilter').addEventListener('change', function() {
    const filterSection = document.getElementById('filterSection');
    if (this.checked) {
        filterSection.classList.remove('hidden');
    } else {
        filterSection.classList.add('hidden');
    }
});


        document.getElementById('enableFilter').addEventListener('change', function () {
            const filterSection = document.getElementById('filterSection');
            if (this.checked) {
                filterSection.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
            }
        });


         document.getElementById('searchIds').addEventListener('keypress', function(event) {
 
         document.getElementById('searchIds').addEventListener('keypress', function (event) {
             if (event.key === 'Enter') {
             if (event.key === 'Enter') {
                 event.preventDefault();
                 event.preventDefault();
Linha 215: Linha 258:
             }
             }
         });
         });
         document.getElementById('mapType').addEventListener('change', function() {
         document.getElementById('mapType').addEventListener('change', function () {
             const selectedMapType = this.value;
             const selectedMapType = this.value;
             const specificOptionSelect = document.getElementById('specificOption');
             const specificOptionSelect = document.getElementById('specificOption');
Linha 231: Linha 274:
         });
         });


         document.getElementById('specificOption').addEventListener('change', function() {
         document.getElementById('specificOption').addEventListener('change', function () {
             const selectedMapType = document.getElementById('mapType').value;
             const selectedMapType = document.getElementById('mapType').value;
             const selectedOption = this.value;
             const selectedOption = this.value;
             const imageContainer = document.getElementById('imageContainer');
             const imageContainer = document.getElementById('imageContainer');
           
 
             if (selectedMapType && selectedOption) {
             if (selectedMapType && selectedOption) {
                 const images = specificOptions[selectedMapType][selectedOption];
                 const images = specificOptions[selectedMapType][selectedOption];
Linha 272: Linha 315:
         });
         });


         document.getElementById('filterButton').addEventListener('click', function() {
         document.getElementById('filterButton').addEventListener('click', function () {
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
             const imageContainer = document.getElementById('imageContainer');
             const imageContainer = document.getElementById('imageContainer');
Linha 314: Linha 357:
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 802

edições

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