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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 05h43min de 24 de agosto de 2024

1 391 bytes adicionados ,  24 agosto
Desfeita a edição 85483 de Renee (Discussão)
(Desfeita a edição 85484 de Renee (Discussão))
Etiqueta: Desfazer
(Desfeita a edição 85483 de Renee (Discussão))
Etiqueta: Desfazer
Linha 6: Linha 6:
     <title>Seleção e Exibição de Imagens</title>
     <title>Seleção e Exibição de Imagens</title>
     <style>
     <style>
        .mapsCalc__select {
.d-flex {
            width: 100%;
    display: flex;
            max-width: 400px; /* Ajuste conforme necessário */
    justify-content: center;
            min-width: 300px; /* Define a largura mínima */
    align-items: center;
            padding: 10px;
    flex-direction: column;
            font-size: 16px;
    margin-top: -15px; /* Ajuste este valor conforme necessário para subir o botão */
            border-radius: 5px;
}
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
 
        .input-group {
            position: relative;
            margin: 20px 0;
        }
 
        .mapsCalc__label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .d-flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: -20px;
        }


         #filterButton {
         .hidden {
             margin-top: 10px;
             display: none;
         }
         }
        #filterButton img {
            border-radius: 12px;
            width: auto;
            height: auto;
        }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
Linha 57: Linha 24:
             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 */
            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 {
            border-radius: 12px;
            width: auto; /* 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 {
          display: flex;
        }
        .mw-parser-output {
          display: inline-block;
          padding: .5rem 2rem;
          margin: 0 auto;
          border: 30px solid transparent;
          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 */
}


        #searchButton, #filterButton {
.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;
}
.mapsCalc__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"] {
    width: 100%; /* Mantém a largura total disponível */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Inclui o padding e a borda na largura total */
}
        .mapsCalc__label {
            position: absolute;
            top: -18px; /* Eleva o texto um pouco mais para cima */
             background: none;
             background: none;
             border: none;
             padding: 0 5px;
             padding: 0;
            font-size: 14px;
             cursor: pointer;
             font-weight: bold; /* Deixa o texto em negrito */
             color: #0d0d0d;
         }
         }
 
         .hover-minimize:hover {
         #searchButton img, #filterButton img {
             transform: scale(0.95); /* Adiciona um efeito de minimizar ao passar o mouse */
             width: 12px;
             transition: transform 0.2s ease-in-out;
             vertical-align: middle;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm" onsubmit="return false;">
     <form id="mapForm">
         <div id="mapTypeSelection" class="input-group">
         <div id="mapTypeSelection" class="input-group">
             <select id="mapType" class="mapsCalc__select">
             <select id="mapType" class="mapsCalc__select">
Linha 116: Linha 135:


         <div id="filterById" class="input-group">
         <div id="filterById" class="input-group">
             <label class="mapsCalc__label" for="searchIds">Buscar por ID(s):</label>
             <label for="searchIds">Buscar por ID(s):</label>
             <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula" class="mapsCalc__select" maxlength="100">
             <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">
             <button type="button" id="filterButton" class="hover-minimize">
             <button type="button" id="filterButton" class="hover-minimize">
                 <img src="https://wiki.pokexgames.com/images/d/d3/Banner_calculadora.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>
       
         <div id="imageContainer" class="image-container hidden">
         <div id="imageContainer" class="image-container hidden">
             <!-- As imagens e suas informações serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
Linha 133: Linha 150:
     <script>
     <script>
         const specificOptions = {
         const specificOptions = {
             1: {
             1: { // Mapa Vermelho
                 'Areia': [
                 'Areia': [
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
Linha 142: Linha 159:
                     { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                     { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                 ],
                 ],
                // Outras opções do Mapa Vermelho
            },
            2: { // Mapa Verde
                // Adicionar dados para o Mapa Verde aqui
             },
             },
             2: {},
             3: { // Mapa Roxo
             3: {}
                // Adicionar dados para o Mapa Roxo aqui
             }
         };
         };


Linha 212: Linha 234:
                 let allImages = [];
                 let allImages = [];


                // Recolhe todas as imagens que correspondem aos IDs
                 Object.keys(specificOptions).forEach(mapType => {
                 Object.keys(specificOptions).forEach(mapType => {
                     const mapOptions = specificOptions[mapType];
                     const mapOptions = specificOptions[mapType];
Linha 220: Linha 243:
                 });
                 });


                // Ordena as imagens pelo nome do local
                 allImages.sort((a, b) => a.local.localeCompare(b.local));
                 allImages.sort((a, b) => a.local.localeCompare(b.local));


                // Gera o HTML para exibir as imagens ordenadas
                 allImages.forEach(image => {
                 allImages.forEach(image => {
                     imagesHtml += `
                     imagesHtml += `
Linha 239: Linha 264:
             } else {
             } else {
                 imageContainer.classList.add('hidden');
                 imageContainer.classList.add('hidden');
            }
        });
        document.getElementById('mapForm').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // Evita o envio do formulário
                document.getElementById('filterButton').click(); // Aciona o botão de filtro
             }
             }
         });
         });
Renee
Administradores
5 801

edições

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

Menu de navegação