5 802
edições
Etiqueta: Desfazer |
Etiqueta: Desfazer |
||
Linha 6: | Linha 6: | ||
<title>Seleção e Exibição de Imagens</title> | <title>Seleção e Exibição de Imagens</title> | ||
<style> | <style> | ||
.d-flex { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: column; | |||
margin-top: -15px; /* Ajuste este valor conforme necessário para subir o botão */ | |||
} | |||
.hidden { | |||
display: none; | |||
} | } | ||
.image-container { | .image-container { | ||
display: flex; | display: flex; | ||
Linha 57: | Linha 24: | ||
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
.image-container .image-item { | .image-container .image-item { | ||
flex: 1 0 30%; | flex: 1 0 30%; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.image-container img { | .image-container img { | ||
width: 320px; | width: 320px; | ||
margin-bottom: 5px; | margin-bottom: 5px; | ||
} | } | ||
.image-info { | .image-info { | ||
margin-top: 5px; | margin-top: 5px; | ||
} | } | ||
select, input[type="text"], button { | select, input[type="text"], button { | ||
margin: 5px; | margin: 5px; | ||
} | } | ||
#filterButton, #searchButton { | |||
background: none; /* Remove o fundo do botão */ | |||
border: none; /* Remove a borda do botão */ | |||
padding: 0; /* Remove o padding do botão */ | |||
cursor: pointer; /* Mostra o cursor de ponteiro ao passar sobre o botão */ | |||
margin-top: 5px; /* Ajuste a margem superior para subir o botão */ | |||
} | |||
#filterButton img, #searchButton img { | |||
border-radius: 12px; | |||
width: auto; /* Garante que a largura se ajuste ao tamanho original da imagem */ | |||
height: auto; /* Garante que a altura se ajuste ao tamanho original da imagem */ | |||
} | |||
.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; | |||
} | |||
.input-group { | |||
position: relative; | |||
margin: 20px 0; /* Ajuste a margem para mover o campo para cima */ | |||
} | |||
.input-group label { | |||
position: absolute; | |||
top: -18px; /* Eleva o texto para cima */ | |||
background: none; | |||
padding: 0 5px; | |||
font-size: 14px; | |||
font-weight: bold; | |||
color: #0d0d0d; | |||
} | |||
.mapsCalc__select { | |||
width: 100%; /* Mantém a largura total disponível */ | |||
padding: 10px; | |||
font-size: 16px; | |||
border-radius: 5px; | |||
border: 1px solid #ccc; | |||
appearance: none; | |||
background-color: #fff; /* Adiciona um fundo branco */ | |||
box-sizing: border-box; /* Inclui o padding e a borda na largura total */ | |||
} | |||
.input-group input[type="text"] { | |||
width: 100%; /* Mantém a largura total disponível */ | |||
padding: 10px; | |||
font-size: 16px; | |||
border-radius: 5px; | |||
border: 1px solid #ccc; | |||
box-sizing: border-box; /* Inclui o padding e a borda na largura total */ | |||
} | |||
.mapsCalc__label { | |||
position: absolute; | |||
top: -18px; /* Eleva o texto um pouco mais para cima */ | |||
background: none; | background: none; | ||
padding: 0 5px; | |||
font-size: 14px; | |||
font-weight: bold; /* Deixa o texto em negrito */ | |||
color: #0d0d0d; | |||
} | } | ||
.hover-minimize:hover { | |||
transform: scale(0.95); /* Adiciona um efeito de minimizar ao passar o mouse */ | |||
transition: transform 0.2s ease-in-out; | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id="mapForm | <form id="mapForm"> | ||
<div id="mapTypeSelection" class="input-group"> | <div id="mapTypeSelection" class="input-group"> | ||
<select id="mapType" class="mapsCalc__select"> | <select id="mapType" class="mapsCalc__select"> | ||
Linha 116: | Linha 135: | ||
<div id="filterById" class="input-group"> | <div id="filterById" class="input-group"> | ||
<label | <label for="searchIds">Buscar por ID(s):</label> | ||
<input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula" class="mapsCalc__select | <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula" class="mapsCalc__select"> | ||
</div> | </div> | ||
<div class="d-flex justify-center align-center flex-column"> | |||
<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/ | <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar"> | ||
</button> | </button> | ||
</div> | </div> | ||
<div id="imageContainer" class="image-container hidden"> | <div id="imageContainer" class="image-container hidden"> | ||
<!-- As imagens e suas informações serão exibidas aqui --> | <!-- As imagens e suas informações serão exibidas aqui --> | ||
Linha 133: | Linha 150: | ||
<script> | <script> | ||
const specificOptions = { | const specificOptions = { | ||
1: { | 1: { // Mapa Vermelho | ||
'Areia': [ | 'Areia': [ | ||
{ id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }, | { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }, | ||
Linha 142: | Linha 159: | ||
{ id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' } | { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' } | ||
], | ], | ||
// Outras opções do Mapa Vermelho | |||
}, | |||
2: { // Mapa Verde | |||
// Adicionar dados para o Mapa Verde aqui | |||
}, | }, | ||
3: { // Mapa Roxo | |||
// Adicionar dados para o Mapa Roxo aqui | |||
} | |||
}; | }; | ||
Linha 212: | Linha 234: | ||
let allImages = []; | let allImages = []; | ||
// Recolhe todas as imagens que correspondem aos IDs | |||
Object.keys(specificOptions).forEach(mapType => { | Object.keys(specificOptions).forEach(mapType => { | ||
const mapOptions = specificOptions[mapType]; | const mapOptions = specificOptions[mapType]; | ||
Linha 220: | Linha 243: | ||
}); | }); | ||
// Ordena as imagens pelo nome do local | |||
allImages.sort((a, b) => a.local.localeCompare(b.local)); | allImages.sort((a, b) => a.local.localeCompare(b.local)); | ||
// Gera o HTML para exibir as imagens ordenadas | |||
allImages.forEach(image => { | allImages.forEach(image => { | ||
imagesHtml += ` | imagesHtml += ` | ||
Linha 239: | Linha 264: | ||
} else { | } else { | ||
imageContainer.classList.add('hidden'); | imageContainer.classList.add('hidden'); | ||
} | } | ||
}); | }); |