5 801
edições
Sem resumo de edição Etiqueta: Revertido |
Sem resumo de edição Etiqueta: Revertido |
||
Linha 13: | Linha 13: | ||
flex-direction: column; | flex-direction: column; | ||
margin-top: -15px; | margin-top: -15px; | ||
} | } | ||
Linha 33: | Linha 32: | ||
} | } | ||
.image-container img { | .image-container img { | ||
object-fit: cover; | |||
margin-bottom: 5px; | |||
} | } | ||
.image-info { | .image-info { | ||
Linha 51: | Linha 50: | ||
#searchButton { | #searchButton { | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
padding: 0; | padding: 0; | ||
cursor: pointer; | cursor: pointer; | ||
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
Linha 66: | Linha 60: | ||
border-radius: 12px; | border-radius: 12px; | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
} | } | ||
Linha 83: | Linha 75: | ||
min-width: 340px; | min-width: 340px; | ||
min-height: 270px; | min-height: 270px; | ||
} | |||
.input-group { | .input-group { | ||
position: relative; | position: relative; | ||
margin: 20px 0; | margin: 20px 0; | ||
} | } | ||
Linha 94: | Linha 85: | ||
position: absolute; | position: absolute; | ||
top: -18px; | top: -18px; | ||
background: none; | background: none; | ||
padding: 0 5px; | padding: 0 5px; | ||
Linha 104: | Linha 94: | ||
.maps__select { | .maps__select { | ||
width: 100%; | width: 100%; | ||
padding: 10px; | padding: 10px; | ||
font-size: 16px; | font-size: 16px; | ||
Linha 111: | Linha 100: | ||
appearance: none; | appearance: none; | ||
background-color: #fff; | background-color: #fff; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.input-group input[type="text"] { | .input-group input[type="text"] { | ||
width: 100%; | width: 100%; | ||
padding: 10px; | padding: 10px; | ||
font-size: 16px; | font-size: 16px; | ||
Linha 125: | Linha 110: | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
Linha 131: | Linha 115: | ||
position: absolute; | position: absolute; | ||
top: -18px; | top: -18px; | ||
background: none; | background: none; | ||
padding: 0 5px; | padding: 0 5px; | ||
font-size: 14px; | font-size: 14px; | ||
font-weight: bold; | font-weight: bold; | ||
color: #0d0d0d; | color: #0d0d0d; | ||
} | } | ||
Linha 142: | Linha 124: | ||
.hover-minimize:hover { | .hover-minimize:hover { | ||
transform: scale(0.95); | transform: scale(0.95); | ||
} | } | ||
Linha 148: | Linha 129: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
} | } | ||
Linha 155: | Linha 135: | ||
padding: 0; | padding: 0; | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
Linha 164: | Linha 141: | ||
.filter-label { | .filter-label { | ||
margin-left: 10px; | margin-left: 10px; | ||
font-size: 14px; | font-size: 14px; | ||
font-weight: bold; | font-weight: bold; | ||
color: #0d0d0d; | color: #0d0d0d; | ||
line-height: 1.5; | line-height: 1.5; | ||
} | } | ||
</style> | </style> | ||
Linha 207: | Linha 182: | ||
<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=" | <label for="searchIds" class="maps__label">Buscar por Nº do Mapa:</label> | ||
<input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class=" | <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="maps__select"> | ||
</div> | </div> | ||
<div id="filterByTag" class="hidden input-group"> | <div id="filterByTag" class="hidden input-group"> | ||
<label for="searchTag" class=" | <label for="searchTag" class="maps__label">Buscar por Tag:</label> | ||
<input type="text" id="searchTag" placeholder="Digite a tag"> | <input type="text" id="searchTag" placeholder="Digite a tag"> | ||
</div> | </div> | ||
<div class="d-flex | <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/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"> | ||
Linha 225: | Linha 200: | ||
<!-- As imagens e suas informações serão exibidas aqui --> | <!-- As imagens e suas informações serão exibidas aqui --> | ||
</div> | </div> | ||
<div id="error-message" class="hidden" style="color: red; font-weight: bold; text-align: center;"> | <div id="error-message" class="hidden" style="color: red; font-weight: bold; text-align: center;"> | ||
Por favor, selecione "Tipo de Mapa" e "Local do X" antes de buscar por tag. | |||
</div> | </div> | ||
</form> | </form> | ||
<script> | <script> | ||
const specificOptions = { | const specificOptions = { | ||
Linha 312: | Linha 286: | ||
} | } | ||
}; | }; | ||
document.getElementById('mapType').addEventListener('change', updateOptions); | |||
document.getElementById('specificOption').addEventListener('change', updateOptions); | |||
document.getElementById('enableFilter').addEventListener('change', toggleFilter); | |||
document.getElementById('filterButton').addEventListener('click', applyFilters); | |||
document.getElementById('searchTag').addEventListener('input', toggleFilter); | |||
document.getElementById(' | function updateOptions() { | ||
const filterSection = document.getElementById(' | const mapType = document.getElementById('mapType').value; | ||
if ( | const specificOption = document.getElementById('specificOption').value; | ||
const specificOptionsDiv = document.getElementById('specificOptions'); | |||
const filterSectionDiv = document.getElementById('filterSection'); | |||
const filterByTagDiv = document.getElementById('filterByTag'); | |||
if (mapType) { | |||
specificOptionsDiv.classList.remove('hidden'); | |||
} else { | } else { | ||
specificOptionsDiv.classList.add('hidden'); | |||
filterSectionDiv.classList.add('hidden'); | |||
document.getElementById('searchTag').value = ''; | |||
} | } | ||
if (mapType && specificOption) { | |||
filterSectionDiv.classList.remove('hidden'); | |||
} else { | |||
filterSectionDiv.classList.add('hidden'); | |||
} | } | ||
} | } | ||
function toggleFilter() { | |||
const isFilterEnabled = document.getElementById('enableFilter').checked; | |||
const filterByTagDiv = document.getElementById('filterByTag'); | |||
const searchTagInput = document.getElementById('searchTag'); | |||
if (isFilterEnabled) { | |||
filterByTagDiv.classList.remove('hidden'); | |||
} else { | } else { | ||
filterByTagDiv.classList.add('hidden'); | |||
searchTagInput.value = ''; | |||
} | } | ||
} | } | ||
document. | function applyFilters() { | ||
const mapType = document.getElementById('mapType').value; | |||
const specificOption = document.getElementById('specificOption').value; | |||
const searchIds = document.getElementById('searchIds').value.trim().split(',').map(id => id.trim()); | |||
const searchTag = document.getElementById('searchTag').value.trim().toLowerCase(); | |||
const imageContainer = document.getElementById('imageContainer'); | |||
const errorMessage = document.getElementById('error-message'); | |||
imageContainer.innerHTML = ''; | |||
errorMessage.classList.add('hidden'); | |||
if (searchTag && (!mapType || !specificOption)) { | |||
errorMessage.classList.remove('hidden'); | errorMessage.classList.remove('hidden'); | ||
return; | return; | ||
} | } | ||
let images = []; | |||
if (mapType && specificOption) { | |||
images = specificOptions[mapType][specificOption] || []; | |||
if (searchIds.length) { | |||
images = images.filter(item => searchIds.includes(item.id)); | |||
if ( | |||
if ( | |||
images. | |||
} | } | ||
if (searchTag) { | |||
images = images.filter(item => item.tag && item.tag.toLowerCase().includes(searchTag)); | |||
} | } | ||
} | } | ||
if (images.length) { | |||
images.forEach(item => { | |||
const imageElement = document.createElement('div'); | |||
imageElement.classList.add('image-item'); | |||
imageElement.innerHTML = ` | |||
<img src="${item.imageUrl}" alt="Mapa"> | |||
if (images.length | |||
images.forEach( | |||
const | |||
<img src="${ | |||
<div class="image-info"> | <div class="image-info"> | ||
<p>ID: ${ | <p>ID: ${item.id}</p> | ||
<p>Local: ${ | <p>Local: ${item.local}</p> | ||
<p>Coordenadas: ${ | <p>Coordenadas: ${item.coordinates}</p> | ||
</div> | </div> | ||
`; | `; | ||
imageContainer.appendChild( | imageContainer.appendChild(imageElement); | ||
}); | }); | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} else { | |||
imageContainer.classList.add('hidden'); | |||
errorMessage.classList.remove('hidden'); | |||
} | } | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |