Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
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> |
Edição das 04h08min de 27 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>Seleção e Exibição de Imagens</title> <style> .d-flex { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: -15px; }
.hidden { display: none; }
.image-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 5px; }
.image-container .image-item { flex: 1 0 30%; text-align: center; }
.image-container img { object-fit: cover; margin-bottom: 5px; }
.image-info { margin-top: 5px; }
select, input[type="text"], button { margin: 5px; }
#filterButton, #searchButton { background: none; border: none; padding: 0; cursor: pointer; margin-top: 5px; }
#filterButton img, #searchButton img { border-radius: 12px; width: auto; height: auto; }
.mw-body-content { display: flex; }
.mw-parser-output { display: inline-block; padding: .5rem 2rem; margin: 0 auto; border: 30px solid transparent; border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38; min-width: 340px; min-height: 270px; }
.input-group { position: relative; margin: 20px 0; }
.input-group label { position: absolute; top: -18px; background: none; padding: 0 5px; font-size: 14px; font-weight: bold; color: #0d0d0d; }
.maps__select { width: 100%; padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; appearance: none; background-color: #fff; box-sizing: border-box; }
.input-group input[type="text"] { width: 100%; padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; }
.maps__label { position: absolute; top: -18px; background: none; padding: 0 5px; font-size: 14px; font-weight: bold; color: #0d0d0d; }
.hover-minimize:hover { transform: scale(0.95); }
.filter-container { display: flex; align-items: center; }
.filter-container input[type="checkbox"] { margin: 0; padding: 0; width: auto; height: auto; vertical-align: middle; }
.filter-label { margin-left: 10px; font-size: 14px; font-weight: bold; color: #0d0d0d; line-height: 1.5; } </style>
</head> <body>
<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>
<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>
<input type="checkbox" id="toggleFilter"> <label for="toggleFilter" class="filter-label">Ativar Filtro</label>
<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>
<input type="text" id="filterValue" placeholder="Digite o valor"> <button id="filterButton" class="hover-minimize">Filtrar</button>
<script> const specificOptions = { 1: { Areia: [ { 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: { Areia: [ // Mapas de Areia para o Mapa Verde ], // Outras categorias conforme necessário }, 3: { Areia: [ // Mapas de Areia para o Mapa Roxo ], // 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 updateMaps() { mapsContainer.innerHTML = ;
if (!currentType || !currentLocation) { return; }
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] || [];
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>
</body> </html>