5 667
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="pt-BR"> | <html lang="pt-BR"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Linha 13: | Linha 12: | ||
flex-direction: column; | flex-direction: column; | ||
margin-top: -15px; | margin-top: -15px; | ||
} | } | ||
Linha 34: | Linha 32: | ||
.image-container img { | .image-container img { | ||
object-fit: cover; | object-fit: cover; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
} | } | ||
Linha 51: | Linha 49: | ||
#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 59: | ||
border-radius: 12px; | border-radius: 12px; | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
} | } | ||
Linha 88: | Linha 79: | ||
position: relative; | position: relative; | ||
margin: 20px 0; | margin: 20px 0; | ||
} | } | ||
Linha 94: | Linha 84: | ||
position: absolute; | position: absolute; | ||
top: -18px; | top: -18px; | ||
background: none; | background: none; | ||
padding: 0 5px; | padding: 0 5px; | ||
Linha 104: | Linha 93: | ||
.maps__select { | .maps__select { | ||
width: 100%; | width: 100%; | ||
padding: 10px; | padding: 10px; | ||
font-size: 16px; | font-size: 16px; | ||
Linha 111: | Linha 99: | ||
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 124: | Linha 109: | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
Linha 130: | Linha 114: | ||
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 141: | Linha 123: | ||
.hover-minimize:hover { | .hover-minimize:hover { | ||
transform: scale(0.95); | transform: scale(0.95); | ||
} | } | ||
Linha 153: | Linha 134: | ||
padding: 0; | padding: 0; | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
Linha 162: | Linha 140: | ||
.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> | ||
</head> | </head> | ||
<body> | <body> | ||
< | <div class="container"> | ||
<div | <div class="filters"> | ||
<div class="input-group"> | |||
<label for="typeMap" class="maps__label">Tipo de Mapa:</label> | |||
<select id="typeMap" class="maps__select"> | |||
<option value="">Selecione um tipo</option> | |||
<option value="1">Mapa Vermelho</option> | |||
<option value="2">Mapa Verde</option> | |||
<option value="3">Mapa Roxo</option> | |||
</select> | |||
</div> | |||
<div class="input-group"> | |||
<label for="specificLocation" class="maps__label">Local do X:</label> | |||
<select id="specificLocation" class="maps__select"> | |||
<option value="">Selecione um local</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 class="filter-container"> | |||
<input type="checkbox" id="toggleFilter"> | |||
<label for=" | <label for="toggleFilter" class="filter-label">Ativar Filtro</label> | ||
</div> | </div> | ||
<div id=" | <div id="filterOptions" class="hidden"> | ||
<div class="input-group"> | |||
<label for="filterBy" class="maps__label">Filtrar por:</label> | |||
<select id="filterBy" class="maps__select"> | |||
<option value="">Selecione uma opção</option> | |||
<option value="number">Número</option> | |||
<option value="tag">Tag</option> | |||
</select> | |||
</div> | |||
<div class="input-group"> | |||
<input type="text" id="filterValue" placeholder="Digite o valor"> | |||
< | <button id="filterButton" class="hover-minimize">Filtrar</button> | ||
</ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div id=" | <div id="mapsContainer" class="image-container"></div> | ||
<div id="errorMessage" class="error-message"></div> | |||
</ | </div> | ||
<script> | <script> | ||
const specificOptions = { | const specificOptions = { | ||
1: { | 1: { | ||
Areia: [ | |||
{ id: ' | { id: '7007', local: 'Pirâmide nos Cacturne', coordinates: '5631, 5589, 7', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5631%2C_5589%2C_7.webp' }, | ||
{ id: '7008', local: 'Praia da Areia', coordinates: '4500, 5000, 8', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png' } | |||
], | ], | ||
// | Gelo: [ | ||
// Mapas de Gelo para o Mapa Vermelho | |||
], | |||
// Outras categorias conforme necessário | |||
}, | }, | ||
2: { | 2: { | ||
Areia: [ | |||
// Mapas de Areia para o Mapa Verde | |||
], | ], | ||
// Outras | // Outras categorias conforme necessário | ||
}, | }, | ||
3: { | 3: { | ||
Areia: [ | |||
// Mapas de Areia para o Mapa Roxo | |||
], | ], | ||
// Outras | // Outras categorias conforme necessário | ||
} | } | ||
}; | }; | ||
const mapsContainer = document.getElementById('mapsContainer'); | |||
const errorMessage = document.getElementById('errorMessage'); | |||
const typeMapSelect = document.getElementById('typeMap'); | |||
const specificLocationSelect = document.getElementById('specificLocation'); | |||
const filterOptions = document.getElementById('filterOptions'); | |||
const toggleFilter = document.getElementById('toggleFilter'); | |||
const filterBySelect = document.getElementById('filterBy'); | |||
const filterValueInput = document.getElementById('filterValue'); | |||
const filterButton = document.getElementById('filterButton'); | |||
let currentType = ''; | |||
let currentLocation = ''; | |||
function | function updateMaps() { | ||
mapsContainer.innerHTML = ''; | |||
if (! | if (!currentType || !currentLocation) { | ||
return; | return; | ||
} | } | ||
const | const maps = specificOptions[currentType][currentLocation] || []; | ||
maps.forEach(map => { | |||
const img = document.createElement('img'); | |||
img.src = map.imageUrl; | |||
img.alt = map.local; | |||
mapsContainer.appendChild(img); | |||
}); | |||
} | |||
function applyFilter() { | |||
const filterType = filterBySelect.value; | |||
const filterValue = filterValueInput.value.toLowerCase(); | |||
const maps = specificOptions[currentType][currentLocation] || []; | |||
if ( | const filteredMaps = maps.filter(map => { | ||
if (filterType === 'number') { | |||
} | return map.id.includes(filterValue); | ||
} else if (filterType === 'tag') { | |||
return map.tag.toLowerCase().includes(filterValue); | |||
} | |||
return true; | |||
}); | |||
mapsContainer.innerHTML = ''; | |||
filteredMaps.forEach(map => { | |||
const img = document.createElement('img'); | |||
img.src = map.imageUrl; | |||
img.alt = map.local; | |||
mapsContainer.appendChild(img); | |||
}); | |||
} | } | ||
typeMapSelect.addEventListener('change', () => { | |||
currentType = typeMapSelect.value; | |||
updateMaps(); | |||
}); | |||
specificLocationSelect.addEventListener('change', () => { | |||
currentLocation = specificLocationSelect.value; | |||
updateMaps(); | |||
}); | |||
toggleFilter.addEventListener('change', () => { | |||
filterOptions.classList.toggle('hidden', !toggleFilter.checked); | |||
if (!toggleFilter.checked) { | |||
filterValueInput.value = ''; | |||
applyFilter(); | |||
} | |||
}); | }); | ||
filterButton.addEventListener('click', () => { | |||
if (toggleFilter.checked) { | |||
if (!currentType || !currentLocation) { | |||
errorMessage.textContent = 'Selecione pelo menos um tipo de mapa e local do X'; | |||
return; | |||
} | |||
errorMessage.textContent = ''; | |||
applyFilter(); | |||
} | |||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |