Widget:Test: 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
 
(166 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 4: Linha 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <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 e Exibição de Imagens</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
         .hidden {
         .input-group { margin-bottom: 1em; position: relative; }
        .dropdown {
            border: 1px solid #ccc;
             display: none;
             display: none;
            position: absolute;
            background-color: #fff;
            z-index: 1000;
            max-height: 150px;
            overflow-y: auto;
            width: 100%;
        }
        .dropdown-item {
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .dropdown-item img {
            margin-right: 10px;
        }
        .dropdown-item:hover {
            background-color: #f0f0f0;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-direction: column;
            align-items: center;
             justify-content: center;
             justify-content: center;
            gap: 10px;
            margin-top: 20px;
         }
         }
         .image-container .image-item {
         .image-item {  
             flex: 1 0 45%;
             margin-bottom: 1em;  
            max-width: 45%;
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-item img {
             width: 200px;
             display: block;
            height: 200px;
             margin: 0 auto;
            object-fit: cover;
             margin-bottom: 10px;
         }
         }
         .image-info {
 
             margin-top: 5px;
         .variations-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
             margin-top: 1em;
         }
         }
         select, input[type="text"], button {
 
         .variation-item {
            width: 35%;
            box-sizing: border-box;
             margin: 5px;
             margin: 5px;
            text-align: center;
            border: 1px solid ;
            padding: 10px;
        }
        .variation-item img {
            display: block;
            margin: 0 auto 10px;
         }
         }
         #searchButton img {
 
             width: 24px;
         .swap-button {  
             height: 24px;
            margin-top: 10px;
             vertical-align: middle;
            cursor: pointer;
             width: 15px;
             height: 15px;
             background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
            background-size: contain;
            display: block;
            margin: 0 auto;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
    <h1>Selecione o Tipo de Mapa ou Busque por ID</h1>
     <form id="imageForm">
 
         <div class="input-group">
     <form id="mapForm">
             <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
         <div id="mapTypeSelection">
            <div id="dropdown" class="dropdown"></div>
            <label for="mapType">Tipo de Mapa:</label>
            <select id="mapType">
                <option value="">Selecione um mapa</option>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
        </div>
 
        <div id="specificOptions" class="hidden">
            <label for="specificOption">Local do X:</label>
            <select id="specificOption">
                <option value="">Selecione uma opção</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
        </div>
 
        <div id="searchById">
            <label for="searchIds">Buscar por ID(s):</label>
             <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula">
            <button type="button" id="searchButton">
                <img src="https://wiki.pokexgames.com/images/8/8e/Poke-ball%281%29.png" alt="Buscar">
            </button>
         </div>
         </div>


Linha 82: Linha 90:


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: { // Mapa Vermelho
             'Squirtle': {  
                 'Areia': [
                imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                 variations: [
                    { id: '1002', local: 'Wildwind Island', coordinates: '3969, 3300, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     {  
                    { id: '1003', local: 'Wildwind Island', coordinates: '4002, 3320, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        description: 'Squirtle Purple Ninja Pack',
                     { id: '1004', local: 'Hurricane Island', coordinates: '4166, 3302, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                    { id: '1005', local: 'Shell Island', coordinates: '4266, 3359, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        obtain: {
                    { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                ],
                            text: 'Estilista'
                // Outras opções do Mapa Vermelho
                        },
            },
                        additionalImages: [
            2: { // Mapa Verde
                            { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                 // Adicionar dados para o Mapa Verde aqui
                            { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                        ]
                    },
                     {
                        description: 'Squirtle Red Ninja Pack',
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                            { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'} // Lado Direito
                        ]
                    }
                 ]
             },
             },
            3: { // Mapa Roxo
                // Adicionar dados para o Mapa Roxo aqui
            }
         };
         };


         document.getElementById('mapType').addEventListener('change', function() {
         const imageSearch = document.getElementById('imageSearch');
             const selectedMapType = this.value;
        const dropdown = document.getElementById('dropdown');
             const specificOptionSelect = document.getElementById('specificOption');
        const imageContainer = document.getElementById('imageContainer');
 
        imageSearch.addEventListener('input', function() {
             const searchValue = this.value.trim().toLowerCase();
             dropdown.innerHTML = '';


             if (selectedMapType) {
             if (searchValue) {
                 specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                 Object.keys(imageList).forEach(imageName => {
                const options = Object.keys(specificOptions[selectedMapType]);
                    if (imageName.toLowerCase().includes(searchValue)) {
                options.forEach(option => {
                        const dropdownItem = document.createElement('div');
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                        dropdownItem.classList.add('dropdown-item');
                       
                        const imgElement = document.createElement('img');
                        imgElement.src = imageList[imageName].imageUrl;
                        imgElement.alt = imageName;
                       
                        dropdownItem.appendChild(imgElement);
                        dropdownItem.appendChild(document.createTextNode(imageName));
                       
                        dropdownItem.addEventListener('click', function() {
                            showImageInfo(imageName);
                            dropdown.style.display = 'none';
                        });
                        dropdown.appendChild(dropdownItem);
                    }
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
 
                 dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 dropdown.style.display = 'none';
             }
             }
         });
         });


         document.getElementById('specificOption').addEventListener('change', function() {
         document.addEventListener('click', function(event) {
             const selectedMapType = document.getElementById('mapType').value;
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const selectedOption = this.value;
                 dropdown.style.display = 'none';
            const imageContainer = document.getElementById('imageContainer');
           
            if (selectedMapType && selectedOption) {
                const images = specificOptions[selectedMapType][selectedOption];
                let imagesHtml = '';
 
                if (Array.isArray(images)) {
                    images.forEach(image => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="${selectedOption}">
                                <div class="image-info">
                                    ID: ${image.id} <br>
                                    Local: ${image.local} <br>
                                    Coordenada: ${image.coordinates}
                                </div>
                            </div>
                        `;
                    });
                 } else {
                    imagesHtml = `
                        <div class="image-item">
                            <img src="${images.imageUrl}" alt="${selectedOption}">
                            <div class="image-info">
                                ID: ${images.id} <br>
                                Local: ${images.local} <br>
                                Coordenada: ${images.coordinates}
                            </div>
                        </div>
                    `;
                }
                imageContainer.innerHTML = imagesHtml;
                imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
             }
             }
         });
         });


         document.getElementById('searchButton').addEventListener('click', function() {
function showImageInfo(imageName) {
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
    const imageInfo = imageList[imageName];
            const imageContainer = document.getElementById('imageContainer');
    let imagesHtml = `
         <div class="image-item">
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
        </div>
        <div class="variations-container">
    `;
 
    imageInfo.variations.forEach((variation, index) => {
        imagesHtml += `
             <div class="variation-item">
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                <div class="swap-button" data-variation-index="${index}"></div><br>
                <div class="image-info">
                    <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                </div>
            </div>
        `;
    });


            if (searchIds.length > 0) {
    imagesHtml += '</div>';
                let imagesHtml = '';
                let allImages = [];


                // Recolhe todas as imagens que correspondem aos IDs
    imageContainer.innerHTML = imagesHtml;
                Object.keys(specificOptions).forEach(mapType => {
    imageContainer.classList.remove('hidden');
                    const mapOptions = specificOptions[mapType];
                    Object.keys(mapOptions).forEach(option => {
                        const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                        allImages = allImages.concat(images);
                    });
                });


                // Ordena as imagens pelo nome do local
    // Alternar imagens ao clicar no botão de troca
                allImages.sort((a, b) => a.local.localeCompare(b.local));
    const swapButtons = document.querySelectorAll('.swap-button');


                // Gera o HTML para exibir as imagens ordenadas
    swapButtons.forEach(button => {
                allImages.forEach(image => {
        const index = button.getAttribute('data-variation-index');
                    imagesHtml += `
        const variation = imageInfo.variations[index];
                        <div class="image-item">
        let currentImageIndex = 0;
                            <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                            <div class="image-info">
                                ID: ${image.id} <br>
                                Local: ${image.local} <br>
                                Coordenada: ${image.coordinates}
                            </div>
                        </div>
                    `;
                });


                imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os IDs fornecidos.';
        button.addEventListener('click', () => {
                imageContainer.classList.remove('hidden');
            currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
             } else {
             const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
                imageContainer.classList.add('hidden');
            variationImage.src = variation.additionalImages[currentImageIndex].url;
             }
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
         });
         });
    });
}
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição atual tal como às 23h45min de 16 de outubro de 2024

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

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Busca de Imagens por Nome</title>
   <style>
       .input-group { margin-bottom: 1em; position: relative; }
       .dropdown {
           border: 1px solid #ccc;
           display: none;
           position: absolute;
           background-color: #fff;
           z-index: 1000;
           max-height: 150px;
           overflow-y: auto;
           width: 100%;
       }
       .dropdown-item {
           padding: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
       }
       .dropdown-item img {
           margin-right: 10px;
       }
       .dropdown-item:hover {
           background-color: #f0f0f0;
       }
       .image-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }
       .image-item { 
           margin-bottom: 1em; 
           text-align: center;
       }
       .image-item img {
           display: block;
           margin: 0 auto;
       }
       .variations-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           margin-top: 1em;
       }
       .variation-item {
           width: 35%;
           box-sizing: border-box;
           margin: 5px;
           text-align: center;
           border: 1px solid ;
           padding: 10px;
       }
       .variation-item img {
           display: block;
           margin: 0 auto 10px;
       }
       .swap-button { 
           margin-top: 10px;
           cursor: pointer;
           width: 15px;
           height: 15px;
           background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
           background-size: contain;
           display: block;
           margin: 0 auto;
       }
   </style>

</head> <body>

   <form id="imageForm">
           <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
   </form>
   <script>
       const imageList = {
           'Squirtle': { 
               imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png', 
               variations: [
                   { 
                       description: 'Squirtle Purple Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                       ]
                   },
                   {  
                       description: 'Squirtle Red Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'}  // Lado Direito
                       ]
                   }
               ]
           },
       };
       const imageSearch = document.getElementById('imageSearch');
       const dropdown = document.getElementById('dropdown');
       const imageContainer = document.getElementById('imageContainer');
       imageSearch.addEventListener('input', function() {
           const searchValue = this.value.trim().toLowerCase();
           dropdown.innerHTML = ;
           if (searchValue) {
               Object.keys(imageList).forEach(imageName => {
                   if (imageName.toLowerCase().includes(searchValue)) {
                       const dropdownItem = document.createElement('div');
                       dropdownItem.classList.add('dropdown-item');
                       
                       const imgElement = document.createElement('img');
                       imgElement.src = imageList[imageName].imageUrl;
                       imgElement.alt = imageName;
                       
                       dropdownItem.appendChild(imgElement);
                       dropdownItem.appendChild(document.createTextNode(imageName));
                       
                       dropdownItem.addEventListener('click', function() {
                           showImageInfo(imageName);
                           dropdown.style.display = 'none';
                       });
                       dropdown.appendChild(dropdownItem);
                   }
               });
               dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
           } else {
               dropdown.style.display = 'none';
           }
       });
       document.addEventListener('click', function(event) {
           if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
               dropdown.style.display = 'none';
           }
       });

function showImageInfo(imageName) {

   const imageInfo = imageList[imageName];
   let imagesHtml = `
           <img src="${imageInfo.imageUrl}" alt="${imageName}">
   `;
   imageInfo.variations.forEach((variation, index) => {
       imagesHtml += `
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">

                   <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> 
                   
${variation.description}
Como Obter: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
       `;
   });
imagesHtml += '

';

   imageContainer.innerHTML = imagesHtml;
   imageContainer.classList.remove('hidden');
   // Alternar imagens ao clicar no botão de troca
   const swapButtons = document.querySelectorAll('.swap-button');
   swapButtons.forEach(button => {
       const index = button.getAttribute('data-variation-index');
       const variation = imageInfo.variations[index];
       let currentImageIndex = 0;
       button.addEventListener('click', () => {
           currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
           const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
           variationImage.src = variation.additionalImages[currentImageIndex].url;
           variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
       });
   });

}

   </script>

</body> </html>