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
 
(186 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<script>
<!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;
        }


const optionsImageTestz = [
        .variation-item {
    {
            width: 30%;
        label: "O ódio é um fardo muito grande para suportar (BEAR). Quem eu sou?",
            box-sizing: border-box;
        image: "/images/7/74/Unown-b.png",
            margin: 10px;
        obs: "{|class="wikitable |- !oi |-  |teste |}""
            text-align: center;
    },
            border: 1px solid #ccc;
    {
            padding: 10px;
         label: "Se você persegue (CHASE) algo desesperadamente, isso te ilude. Quem eu sou?",
        }
        image: "/images/6/66/Unown-c.png",
 
        obs: "<center><b>Unown C</b></center>"
         .variation-item img {
    },
            width: 100px;
    {
            height: 100px;
        label: "Você não pode controlar a direção (DIRECT) do vento, mas pode ajustar as velas. Quem eu sou?",
            display: block;
         image: "/images/2/23/Unown-d.png",
            margin: 0 auto 10px;
        obs: "<center><b>Unown D</b></center>"
         }
     },
    </style>
    {
</head>
        label: "A preparação é necessária antes de participar (ENGAGE) de qualquer reunião. Quem eu sou?",
<body>
         image: "/images/4/42/Unown-e.png",
     <form id="imageForm">
        obs: "<center><b>Unown E</b></center>"
         <div class="input-group">
    },
            <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
    {
            <div id="dropdown" class="dropdown"></div>
        label: "É possível encontrar (FIND) esperança mesmo nos dias mais sombrios. Quem eu sou?",
        </div>
        image: "/images/7/70/Unown-f.png",
 
        obs: "<center><b>Unown F</b></center>"
         <div id="imageContainer" class="image-container hidden">
    },
            <!-- As imagens e suas informações serão exibidas aqui -->
    {
        </div>
         label: "Um amigo é um presente (GIFT) que você se dá. Quem eu sou?",
    </form>
        image: "/images/2/21/Unown-g.png",
 
        obs: "<center><b>Unown G</b></center>"
     <script>
     },
        const imageList = {
    {
            'Charmander': {
        label: "Nós não podemos ajudar todo mundo, mas todo mundo pode ajudar (HELP) alguém. Quem eu sou?",
                imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',  
        image: "/images/1/19/Unown-h.png",
                variations: [
        obs: "<center><b>Unown H</b></center>"
                    {  
    },
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
    {
                        description: 'Charmander XXX',
        label: "O medo pode aumentar (INCREASE) sua capacidade de sobreviver. Quem eu sou?",
                        obtain: {
        image: "/images/f/f4/Unown-i.png",
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
        obs: "<center><b>Unown I</b></center>"
                            text: 'Estilista'
    },
                        }
    {
                    },
        label: "Somente quando juntar (JOIN) todos os pedaços é que você poderá ver a foto. Quem eu sou?",
                    {
        image: "/images/0/02/Unown-j.png",
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
        obs: "<center><b>Unown J</b></center>"
                        description: 'Charmander brabo.',
    },
                        obtain: {
    {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
        label: "Se você continuar (KEEP) seguindo em frente, você não terá que parar. Quem eu sou?",
                            text: 'Estilista'
        image: "/images/9/9d/Unown-k.png",
                        }  
        obs: "<center><b>Unown K</b></center>"
                    }
    },
                ]
    {
            },
        label: "Você ri de mim porque eu sou diferente, eu rio (LAUGH) de vocês porque são todos iguais. Quem eu sou?",
         };
        image: "/images/9/9c/Unown-l.png",
 
        obs: "<center><b>Unown L</b></center>"
         const imageSearch = document.getElementById('imageSearch');
    },
        const dropdown = document.getElementById('dropdown');
    {
         const imageContainer = document.getElementById('imageContainer');
        label: "Decida-se (MAKE), talvez você não tenha outra chance. Quem eu sou?",
 
        image: "/images/9/94/Unown-m.png",
         imageSearch.addEventListener('input', function() {
         obs: "<center><b>Unown M</b></center>"
            const searchValue = this.value.trim().toLowerCase();
    },
            dropdown.innerHTML = '';
    {
 
         label: "Você deveria encostar (NUZZLE) em algum lugar. Quem eu sou?",
            if (searchValue) {
         image: "/images/4/4e/Unown-n.png",
                Object.keys(imageList).forEach(imageName => {
         obs: "<center><b>Unown N</b></center>"
                    if (imageName.toLowerCase().includes(searchValue)) {
    },
                        const dropdownItem = document.createElement('div');
    {
                        dropdownItem.classList.add('dropdown-item');
        label: "Você pode observar (OBSERVE) muito apenas assistindo. Quem eu sou?",
                       
        image: "/images/2/21/Unown-o.png",
                        const imgElement = document.createElement('img');
        obs: "<center><b>Unown O</b></center>"
                        imgElement.src = imageList[imageName].imageUrl;
    },
                        imgElement.alt = imageName;
    {
                       
        label: "A vida é a farsa que todos devem executar (PERFORM). Quem eu sou?",
                        dropdownItem.appendChild(imgElement);
        image: "/images/a/a8/Unown-p.png",
                        dropdownItem.appendChild(document.createTextNode(imageName));
        obs: "<center><b>Unown P</b></center>"
                       
    },
                        dropdownItem.addEventListener('click', function() {
    {
                            showImageInfo(imageName);
        label: "Há momentos especiais que aceleram (QUICKEN) seu coração. Quem eu sou?",
                            dropdown.style.display = 'none';
        image: "/images/a/ae/Unown-q.png",
                        });
        obs: "<center><b>Unown Q</b></center>"
                        dropdown.appendChild(dropdownItem);
    },
                    }
    {
                });
        label: "Você não precisa de algo para reassegurar (REASSURE) que você é real. Quem eu sou?",
 
        image: "/images/4/4f/Unown-r.png",
                dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
        obs: "<center><b>Unown R</b></center>"
            } else {
    },
                dropdown.style.display = 'none';
    {
            }
        label: "Humanos estão sempre em busca (SEARCH) de significados. Quem eu sou?",
         });
        image: "/images/f/fe/Unown-s.png",
 
         obs: "<center><b>Unown S</b></center>"
        document.addEventListener('click', function(event) {
    },
            if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
    {
                dropdown.style.display = 'none';
        label: "Se você disser (TELL) a verdade, não precisa se lembrar de nada. Quem eu sou?",
            }
        image: "/images/1/12/Unown-t.png",
         });
         obs: "<center><b>Unown T</b></center>"
 
     },
function showImageInfo(imageName) {
     {
     const imageInfo = imageList[imageName];
         label: "Você não pode desfazer (UNDO) o passado... mas certamente pode não repeti-lo. Quem eu sou?",
     let imagesHtml = `
        image: "/images/1/1a/Unown-u.png",
         <div class="image-item">
         obs: "<center><b>Unown U</b></center>"
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
     },
         </div>
     {
     `;
        label: "Quando você sabe o que está fazendo, quaisquer obstáculos desaparecem (VANISH) do seu caminho. Quem eu sou?",
 
         image: "/images/1/15/Unown-v.png",
     if (imageInfo.variations) {
         obs: "<center><b>Unown V</b></center>"
         imagesHtml += '<div class="variations-container">';
    },
         imageInfo.variations.forEach(variation => {
    {
            imagesHtml += `
        label: "Para ter sucesso, você deve sempre saber o que quer (WANT). Quem eu sou?",
                <div class="variation-item">
        image: "/images/a/ad/Unown-w.png",
                    <img src="${variation.imageUrl}" alt="Variation Image">
        obs: "<center><b>Unown W</b></center>"
                    <div class="image-info">
    },
                        <b>Descrição</b>: ${variation.description} <br>
    {
                        <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
        label: "XXXXX. Quem eu sou?",
                    </div>
        image: "/images/5/58/Unown-x.png",
                </div>
        obs: "<center><b>Unown X</b></center>"
            `;
    },
         });
    {
         imagesHtml += '</div>';
        label: "Às vezes, o melhor que você pode fazer é ceder (YIELD) à tentação. Quem eu sou?",
        image: "/images/f/f9/Unown-y.png",
        obs: "<center><b>Unown Y</b></center>"
    },
    {
         label: "Mantenha-se focado e amplie (ZOOM) suas metas. Quem eu sou?",
         image: "/images/8/81/Unown-z.png",
        obs: "<center><b>Unown Z</b></center>"
     }
     }
]
 
</script>
    imageContainer.innerHTML = imagesHtml;
    imageContainer.classList.remove('hidden');
}
 
    </script>
</body>
</html>

Edição atual tal como às 15h10min de 30 de agosto 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: 30%;
           box-sizing: border-box;
           margin: 10px;
           text-align: center;
           border: 1px solid #ccc;
           padding: 10px;
       }

       .variation-item img {
           width: 100px;
           height: 100px;
           display: block;
           margin: 0 auto 10px;
       }
   </style>

</head> <body> 

   <form id="imageForm">

           <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">

   </form>

   <script>
       const imageList = {
           'Charmander': { 
               imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png', 
               variations: [
                   { 
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander XXX',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       } 
                   },
                   {  
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander brabo.',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       } 
                   }
               ]
           },
       };

       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}">

   `;

   if (imageInfo.variations) {

imagesHtml += '

'; 
       imageInfo.variations.forEach(variation => {
           imagesHtml += `

                   <img src="${variation.imageUrl}" alt="Variation Image">

                       Descrição: ${variation.description} 

                       Como Obter: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>

           `;
       });
imagesHtml += '

'; 

   }

   imageContainer.innerHTML = imagesHtml;
   imageContainer.classList.remove('hidden');

} 

   </script>

</body> </html>

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