diff --git a/Estilos/styles.css b/Estilos/styles.css new file mode 100644 index 0000000..08e5184 --- /dev/null +++ b/Estilos/styles.css @@ -0,0 +1,300 @@ +.sugestoes{ + position: relative; + z-index: 99; + border: 2px solid #dddddd; + border-radius: 4px 4px 4px 4px; + list-style-type: none; + padding: 0; + width: 48%; + margin-left: auto; + margin-right: auto; + text-justify: center; + border-color: rgb(67, 67, 67); +} + +.sugestoes > li:hover{ + background-color: rgb(11, 119, 207); + color: white; + text-align: center; +} + +.img_poke { + text-align: center; + color: red; +} + +.pesq_poke{ + text-align: center; +} + +.border{ + border: rgb(231, 222, 222); + border-radius: 5px; + width: 20%; + padding: 10px; +} + +.bordername{ + border: rgb(231, 222, 222); + border-radius: 8px; + width: 45%; + padding: 10px; + text-align: center; +} + +.EspacoAlinha{ + margin-left: 15px; + display: inline-block; +} + + +.box_align{ + text-align: center; +} + +.borda1{ + border: 5px solid white; + border-radius: 20px; + width: 30%; + padding: 15px; + margin-left: 75px; + background-color: white; + display: inline-block; +} + + + +.bordaCampoNome { + border: 5px solid white; + border-radius: 20px; + width: 38%; + padding: 15px; + margin-left: 20px; /* Reduzido para um alinhamento melhor */ + background-color: white; + display: inline-block; + vertical-align: middle; /* Alinha verticalmente ao texto */ +} + +.bordaCampoNome2 { + border: 5px solid white; + border-radius: 20px; + width: 30.5%; + padding: 15px; + margin-left: 60px; /* Reduzido para um alinhamento melhor */ + background-color: white; + display: inline-block; + vertical-align: middle; /* Alinha verticalmente ao texto */ +} + +.bordaCampoNome3 { + border: 5px solid white; + border-radius: 20px; + width: 30.5%; + padding: 15px; + margin-left: 20px; /* Reduzido para um alinhamento melhor */ + background-color: white; + display: inline-block; + vertical-align: middle; /* Alinha verticalmente ao texto */ +} + +.Navbar{ +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: red; +} + +li { + float: left; +} + +li a, .dropbtn { + display: inline-block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +li a:hover, .dropdown:hover .dropbtn { + background-color: black; +} + +li.dropdown { + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} + +.dropdown-content a:hover { + background-color: #f1f1f1; +} + +.dropdown:hover .dropdown-content { + display: block; +} +} +body{ + margin: 0; + padding: 0; + width: 100%; +} + +.active{ + background-color:black; +} + +.iframe-container { + display: flex; + justify-content: center; + align-items: center; + height: 500px; + background-color: #f0f0f0; + padding: 0; +} + +.iframe-container iframe { + border: 5px outset black; + border-radius: 5px; +} + +.bordaDesc{ + text-align: center; + margin-left: auto; + margin-right: auto; + width: auto; + margin: 20px; + border: 5px solid white; + border-radius: 20px; + padding: 15px; + background-color: white; +} +.div_center +{ + width: 80%; + margin-left: auto; + margin-right: auto; + background-color: darkgray; + padding-top: 25px; + padding-left: 2%; + padding-right: 2%; + padding-bottom: 25px; +} + +.dropdown_select { + position: relative; + display: inline-block; +} + +.dropdown_select-content { + display: none; + position: absolute; + background-color: #f9f9f9; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + padding: 10px 0; + z-index: 1; + border: 1px solid #ccc; + border-radius: 8px; +} + +.dropdown_select-content button { + background: none; + border: none; + padding: 10px 20px; + text-align: left; + width: 100%; + font-size: 14px; +} + +.dropdown_select-content button:hover { + background-color: #ddd; +} + +.dropdown_select:hover .dropdown_select-content { + display: block; +} + +.dropdown_select-btn { + padding: 10px 20px; + width: 120px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 8px; +} + + +.container { + margin-left: auto; + margin-right: auto; + width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + } + + .item_repeat { + display: inline-block; + width: 100%; + height: 100%; + background: lightgray; + border-radius: 7px; + } + + .item_repeat:hover{ + scale: 1.2; + } + + .poke_img{ + scale: 0.6; + } + + .imageHome { + max-width: 100%; + max-height: 100%; + margin-left: auto; + margin-right: auto; + object-fit: contain; + } + + h3{ + margin-left: 10px; + } + + @media (max-width: 1024px) { + .container { + grid-template-columns: repeat(3, 1fr); /* 3 colunas com 1fr cada */ + } +} + +/* Para telas menores que 768px (como celulares em paisagem) */ +@media (max-width: 768px) { + .container { + grid-template-columns: repeat(2, 1fr); /* 2 colunas com 1fr cada */ + } +} + +/* Para telas muito pequenas (como celulares em retrato) */ +@media (max-width: 480px) { + .container { + grid-template-columns: 1fr; /* 1 coluna */ + } +} + diff --git a/Imagens/Pokedex/hires/811.png b/Imagens/Pokedex/hires/811.png index 18f3793..2d0d3ff 100644 Binary files a/Imagens/Pokedex/hires/811.png and b/Imagens/Pokedex/hires/811.png differ diff --git a/Scripts/home_script.js b/Scripts/home_script.js new file mode 100644 index 0000000..58a8957 --- /dev/null +++ b/Scripts/home_script.js @@ -0,0 +1,72 @@ +window.onload = () => { + function displayPokemons(generation) + { + const container = document.querySelector('.container'); + + // Limpar as divs. + if (container.childElementCount > 0) + { + while (container.firstChild) { + container.removeChild(container.lastChild) + + } + } + + let MAX_POKEMONS = generation + 15; + + for (let i = generation; i <= MAX_POKEMONS; i++) + { + let pokemon = POKEDEX.get_pokemon_by_id(i); + + let nome_pokemon = pokemon.name; + let image_src = pokemon.image.hires; + + let div = document.createElement('div'); + div.className = 'item_repeat'; + + let title = document.createElement("h3"); + title.textContent = nome_pokemon; + + let image = document.createElement("img"); + image.className = "imageHome"; + image.src = image_src; + + let link = document.createElement("a"); + link.href = `index.html?pokemon_name=${pokemon.name}`; + + link.appendChild(image); + + div.appendChild(title); + div.appendChild(link); + + container.appendChild(div); + } + } + + function captureGeneration() { + // Captura o valor selecionado + let selectedValue = parseInt(this.value); + + // Captura o texto visível do item selecionado + //const selectedText = selectElement.options[selectElement.selectedIndex].text; + + // Exibe o valor e o texto no console + console.log(`Valor Selecionado: ${selectedValue}`); + // console.log(`Texto Selecionado: ${selectedText}`); + + displayPokemons(selectedValue); + + // Exemplo de uso da variável + //alert(`Você selecionou: ${selectedText} (Geração ${generation})`); + } + + let gen_buttons = document.getElementsByClassName("gen"); + + for (let button of gen_buttons) + { + button.addEventListener("click", captureGeneration); + } + + displayPokemons(1); + +} diff --git a/Scripts/teste_pokemon.js b/Scripts/teste_pokemon.js index 234dc3e..a72bd3c 100644 --- a/Scripts/teste_pokemon.js +++ b/Scripts/teste_pokemon.js @@ -6,6 +6,67 @@ let dados_pokemon = document.getElementById("poke_dados"); var POKEDEX = new Pokedex(POKEDEX_JSON); +const search_parameters = new URLSearchParams(window.location.search); + +if (!!search_parameters.get("pokemon_name")) +{ + let pokemon_name = search_parameters.get("pokemon_name"); + load_pokemon(pokemon_name, null); +} + +function load_pokemon(desired_pokemon, pokemons_encontrados) +{ + let pokemon = null; + + if (/^\d+$/.test(desired_pokemon)) + { + pokemon = POKEDEX.get_pokemon_by_id(desired_pokemon); + } + else if (POKEDEX.get_pokemon_by_name(desired_pokemon) !== null) + { + pokemon = POKEDEX.get_pokemon_by_name(desired_pokemon); + } + else + { + pokemon = POKEDEX.get_pokemon_by_name(pokemons_encontrados[0]); + } + + display_pokeInfo_to_tag(pokemon.image.hires, image_pokemon, "image"); + display_pokeInfo_to_tag(pokemon.description, desc_pokemon); + display_pokeInfo_to_tag(pokemon.name, name_pokemon); + + dados_pokemon.hidden = true; + + let pre_evol = document.getElementById("pre_evolucao"); + let prox_evol = document.getElementById("prox_evolucao"); + + pre_evol.hidden = true; + prox_evol.hidden = true; + + try + { + dados_pokemon.hidden = false; + + let pokemon_pre = pokemon.get_evolution("prev"); // O Pokémon possui pré-evolução + let pokemon_prox = pokemon.get_evolution("next"); // O Pokémon possui evolução(ões) + + if (pokemon_pre !== null) { + pre_evol.hidden = false; + display_pokeInfo_to_tag(pokemon_pre.name, pre_evol.children[1]); + } + + if (pokemon_prox !== null) { + prox_evol.hidden = false; + display_pokeInfo_to_tag(pokemon_prox[0].name, prox_evol.children[1]); + } + } + catch (error) + { + console.error(`GET_EVOLUTION: ${error}`); + } + + return true; +} search_pokemon.addEventListener("input", (event) => { let desired_pokemon = document.getElementById("pokemon_pesquisado"); @@ -36,55 +97,6 @@ search_pokemon.addEventListener("submit", (event) => { } else { - let pokemon = null; - - if (/^\d+$/.test(desired_pokemon)) - { - pokemon = POKEDEX.get_pokemon_by_id(desired_pokemon); - } - else if (POKEDEX.get_pokemon_by_name(desired_pokemon) !== null) - { - pokemon = POKEDEX.get_pokemon_by_name(desired_pokemon); - } - else - { - pokemon = POKEDEX.get_pokemon_by_name(pokemons_encontrados[0]); - } - - display_pokeInfo_to_tag(pokemon.image.hires, image_pokemon, "image"); - display_pokeInfo_to_tag(pokemon.description, desc_pokemon); - display_pokeInfo_to_tag(pokemon.name, name_pokemon); - - dados_pokemon.hidden = true; - - let pre_evol = document.getElementById("pre_evolucao"); - let prox_evol = document.getElementById("prox_evolucao"); - - pre_evol.hidden = true; - prox_evol.hidden = true; - - try - { - dados_pokemon.hidden = false; - - let pokemon_pre = pokemon.get_evolution("prev"); // O Pokémon possui pré-evolução - let pokemon_prox = pokemon.get_evolution("next"); // O Pokémon possui evolução(ões) - - if (pokemon_pre !== null) { - pre_evol.hidden = false; - display_pokeInfo_to_tag(pokemon_pre.name, pre_evol.children[1]); - } - - if (pokemon_prox !== null) { - prox_evol.hidden = false; - display_pokeInfo_to_tag(pokemon_prox[0].name, prox_evol.children[1]); - } - } - catch (error) - { - console.error(`GET_EVOLUTION: ${error}`); - } - - return true; + load_pokemon(desired_pokemon, pokemons_encontrados); } }); diff --git a/home.html b/home.html index ed93f69..8c15f28 100644 --- a/home.html +++ b/home.html @@ -5,10 +5,10 @@ Pokedex - + - + @@ -19,7 +19,7 @@
  • Pesquisar
  • Pokedex Oficial
  • - Mapa PokeCenters + Mapa PokeCenters - - -
    -
    -
    -
    - +
    + +
    + +
    +
    + + + + + + + + +
    +
    +
    + + +
    + +
    +

    © 2024 Minha Página

    +
    + +
    - \ No newline at end of file +
    + + + + + + + + + + + + + + + +