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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
Etiqueta: Revertido
Linha 46: Linha 46:
<body>
<body>
     <form id="imageForm">
     <form id="imageForm">
        <label for="search">Buscar Imagem:</label>
         <input type="text" id="search" placeholder="Digite o nome do item">
         <input type="text" id="search" placeholder="Digite o nome do item">
         <div id="dropdown" class="dropdown"></div>
         <div id="dropdown" class="dropdown"></div>
Linha 89: Linha 88:
                     <div class="image-info">
                     <div class="image-info">
                         <b>Nome:</b> ${option.name}<br>
                         <b>Nome:</b> ${option.name}<br>
                         <b>Coordenada:</b> ${option.coordinates}<br>
                         <b>Descrição:</b> ${option.coordinates}<br>
                         ${option.obtain}
                         ${option.obtain}
                     </div>
                     </div>

Edição das 03h57min 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>Filtro de Imagens</title>
   <style>
       .image-container {
           display: flex;
           flex-direction: column;
           margin-top: 20px;
       }
       .image-item {
           margin-bottom: 20px;
       }
       .image-info {
           margin-top: 10px;
       }
       .dropdown-item img {
           width: 20px;
           height: 20px;
           margin-right: 10px;
           vertical-align: middle;
       }
       .dropdown-item {
           display: flex;
           align-items: center;
           cursor: pointer;
           padding: 5px;
           border: 1px solid #ddd;
       }
       .dropdown-item:hover {
           background-color: #f0f0f0;
       }
       #infoContainer {
           margin-top: 20px;
       }
   </style>

</head> <body>

   <form id="imageForm">
       <input type="text" id="search" placeholder="Digite o nome do item">
   </form>
   <script>
       const imageOptions = [
           {
               name: 'IMG Charmander',
               imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Charmander.gif',
               coordinates: '1234, 5678, 7',
               obtain: 'Como Obter:  <a href="https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista">Estilista</a>'
           },
           // Adicione mais itens conforme necessário
       ];
       const searchInput = document.getElementById('search');
       const dropdown = document.getElementById('dropdown');
       const infoContainer = document.getElementById('infoContainer');
       searchInput.addEventListener('input', function () {
           const query = searchInput.value.toLowerCase();
           dropdown.innerHTML = ;
           if (query) {
               const filteredOptions = imageOptions.filter(option => option.name.toLowerCase().includes(query));
               filteredOptions.forEach(option => {
                   const item = document.createElement('div');
                   item.className = 'dropdown-item';
                   item.innerHTML = `<img src="${option.imageUrl}" alt="${option.name}"> ${option.name}`;
                   item.addEventListener('click', () => showInfo(option));
                   dropdown.appendChild(item);
               });
           }
       });
       function showInfo(option) {
           infoContainer.innerHTML = `
                   <img src="${option.imageUrl}" alt="${option.name}">
                       Nome: ${option.name}
Descrição: ${option.coordinates}
${option.obtain}
           `;
       }
   </script>

</body> </html>