5 801
edições
Sem resumo de edição |
Sem resumo de edição Etiqueta: Revertido |
||
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 { | .mapsCalc__select { | ||
width: 100%; | |||
max-width: 400px; /* Ajuste conforme necessário */ | |||
min-width: 300px; /* Define a largura mínima */ | |||
padding: 10px; | |||
font-size: 16px; | |||
} | border-radius: 5px; | ||
border: 1px solid #ccc; | |||
box-sizing: border-box; | |||
} | |||
.input-group { | |||
position: relative; | |||
margin: 20px 0; | |||
} | |||
.mapsCalc__label { | |||
position: absolute; | |||
top: -18px; | |||
background: none; | |||
padding: 0 5px; | |||
font-size: 14px; | |||
font-weight: bold; | |||
color: #0d0d0d; | |||
} | |||
.d-flex { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: column; | |||
margin-top: -20px; | |||
} | |||
#filterButton { | |||
margin-top: 10px; | |||
} | } | ||
#filterButton img { | |||
border-radius: 12px; | |||
width: auto; | |||
height: auto; | |||
} | |||
.image-container { | .image-container { | ||
display: flex; | display: flex; | ||
Linha 24: | Linha 57: | ||
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; | ||
} | } | ||
#searchButton, #filterButton { | |||
background: none; | background: none; | ||
border: none; | |||
padding: 0; | |||
cursor: pointer; | |||
} | } | ||
#searchButton img, #filterButton img { | |||
width: 12px; | |||
vertical-align: middle; | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id="mapForm"> | <form id="mapForm" onsubmit="return false;"> | ||
<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 135: | Linha 116: | ||
<div id="filterById" class="input-group"> | <div id="filterById" class="input-group"> | ||
<label for="searchIds">Buscar por ID(s):</label> | <label class="mapsCalc__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" maxlength="100"> | ||
</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/ | <img src="https://wiki.pokexgames.com/images/d/d3/Banner_calculadora.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 150: | Linha 133: | ||
<script> | <script> | ||
const specificOptions = { | const specificOptions = { | ||
1: { | 1: { | ||
'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 159: | Linha 142: | ||
{ 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' } | ||
], | ], | ||
}, | }, | ||
2: {}, | |||
3: {} | |||
} | |||
}; | }; | ||
Linha 234: | Linha 212: | ||
let allImages = []; | let allImages = []; | ||
Object.keys(specificOptions).forEach(mapType => { | Object.keys(specificOptions).forEach(mapType => { | ||
const mapOptions = specificOptions[mapType]; | const mapOptions = specificOptions[mapType]; | ||
Linha 243: | Linha 220: | ||
}); | }); | ||
allImages.sort((a, b) => a.local.localeCompare(b.local)); | allImages.sort((a, b) => a.local.localeCompare(b.local)); | ||
allImages.forEach(image => { | allImages.forEach(image => { | ||
imagesHtml += ` | imagesHtml += ` | ||
Linha 264: | Linha 239: | ||
} else { | } else { | ||
imageContainer.classList.add('hidden'); | imageContainer.classList.add('hidden'); | ||
} | |||
}); | |||
document.getElementById('mapForm').addEventListener('keydown', function(event) { | |||
if (event.key === 'Enter') { | |||
event.preventDefault(); // Evita o envio do formulário | |||
document.getElementById('filterButton').click(); // Aciona o botão de filtro | |||
} | } | ||
}); | }); |