quinta-feira, 25 de junho de 2026

HTML Seleção Brasileiro

Postado em quinta-feira, junho 25, 2026 por Sem comentário

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title> Seleção Brasileira </title>

<style>

/* Configurações Gerais e Fontes */

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

margin: 0;

padding: 20px;

color: #ffffff;

display: flex;

flex-direction: column;

align-items: center;

background: #009C3B;

}


/* Título Principal */

h1 {

background-color: #FFDC00;

color: #002776;

padding: 15px 40px;

border-radius: 50px;

text-transform: uppercase;

letter-spacing: 2px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

margin-bottom: 30px;

display: inline-block;

}


/* Subtítulos */

h2, h3 {

color: #FFDC00;

text-transform: uppercase;

letter-spacing: 1px;

border-bottom: 3px solid #002776;

padding-bottom: 5px;

width: 100%;

max-width: 600px;

margin-top: 30px;

}


/* Lista de Jogadores */

ul {

list-style: none;

padding: 0;

width: 100%;

max-width: 600px;

display: grid;

grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

gap: 12px;

}


li {

background: rgba(0, 39, 118, 0.6);

backdrop-filter: blur(5px);

padding: 12px 20px;

border-radius: 8px;

border-left: 5px solid #FFDC00;

transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;

box-shadow: 0 2px 8px rgba(0,0,0,0.15);

cursor: pointer; /* Indica que o elemento é clicável */

}


li:hover {

transform: translateY(-3px) scale(1.02);

background: rgba(0, 39, 118, 0.85);

box-shadow: 0 6px 15px rgba(0,0,0,0.3);

}


li:active {

transform: scale(0.98);

}


li b {

color: #FFDC00;

margin-right: 5px;

}


/* Tabela de Artilheiro */

table {

width: 100%;

max-width: 600px;

border-collapse: collapse !important;

background-color: #002776;

border-radius: 8px;

overflow: hidden;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

margin-top: 15px;

margin-bottom: 30px;

border: none !important;

}


th {

background-color: #FFDC00;

color: #002776;

padding: 12px;

font-weight: bold;

text-transform: uppercase;

}


td {

padding: 12px;

text-align: center;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

font-size: 1.1em;

}


/* Imagem Principal */

img {

max-width: 100%;

height: auto !important;

border-radius: 12px;

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

border: 4px solid #FFDC00;

margin-top: 15px;

max-width: 600px;

}


/* Animações de Entrada (Fade In) */

@keyframes fadeInUp {

from { opacity: 0; transform: translateY(15px); }

to { opacity: 1; transform: translateY(0); }

}


h1, h2, h3, table, .main-img, ul li {

animation: fadeInUp 0.5s ease-out forwards;

opacity: 0;

}

h1 { animation-delay: 0.1s; }

h2 { animation-delay: 0.2s; }

ul { opacity: 1; }

ul li { animation-delay: 0.3s; }

h3 { animation-delay: 0.4s; }

table { animation-delay: 0.45s; }

.main-img { animation-delay: 0.5s; }


/* Janela Modal (Sistema de exibição de imagens) */

.player-modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.85);

display: flex;

justify-content: center;

align-items: center;

z-index: 1000;

opacity: 0;

visibility: hidden;

transition: opacity 0.3s, visibility 0.3s;

backdrop-filter: blur(5px);

}


.player-modal.active {

opacity: 1;

visibility: visible;

}


.modal-content {

background: #002776;

padding: 25px;

border-radius: 15px;

border: 5px solid #FFDC00;

text-align: center;

position: relative;

max-width: 90%;

max-height: 85vh;

display: flex;

flex-direction: column;

align-items: center;

box-shadow: 0 10px 40px rgba(0,0,0,0.5);

transform: scale(0.8);

transition: transform 0.3s ease-out;

}


.player-modal.active .modal-content {

transform: scale(1);

}


.close-modal {

position: absolute;

top: -15px;

right: -15px;

background: #FFDC00;

color: #002776;

border: none;

width: 35px;

height: 35px;

border-radius: 50%;

font-size: 20px;

font-weight: bold;

cursor: pointer;

box-shadow: 0 4px 8px rgba(0,0,0,0.3);

}


.modal-player-name {

color: #FFDC00;

font-size: 1.5em;

text-transform: uppercase;

margin: 0 0 15px 0;

font-weight: bold;

letter-spacing: 1px;

}


.modal-player-img {

max-width: 100%;

max-height: 60vh;

object-fit: contain;

border-radius: 8px;

border: 2px solid #ffffff;

margin: 0;

background-color: #001f5c;

}

</style>

</head>

<body bgcolor="#009C3B">

<center>

<h1> Lista de Convocados </h1>

</center>

<h2> Jogadores/Os home aí </h2>

<ul id="lista-jogadores">

<li><b>Camisa 1:</b>Alisson Becker </li>

<li><b>Camisa 2:</b>Éderson </li>

<li><b>Camisa 3:</b>Gabriel Magalhães </li>

<li><b>Camisa 4:</b>Marquinhos </li>

<li><b>Camisa 5:</b>Casemiro </li>

<li><b>Camisa 6:</b>Alex Sandro </li>

<li><b>Camisa 7:</b>Vinicius Junior </li>

<li><b>Camisa 8:</b>Bruno Guimarães </li>

<li><b>Camisa 9:</b>Matheus Cunha </li>

<li><b>Camisa 10:</b>Neymar </li>

<li><b>Camisa 11:</b>Raphinha </li>

<li><b>Camisa 12:</b>Weverton </li>

<li><b>Camisa 13:</b>Danilo Silva </li>

<li><b>Camisa 14:</b>Gleison Bremer </li>

<li><b>Camisa 15:</b>Léo Pereira </li>

<li><b>Camisa 16:</b>Douglas Santos </li>

<li><b>Camisa 17:</b>Fabinho </li>

<li><b>Camisa 18:</b>Danilo Santos </li>

<li><b>Camisa 19:</b>Endrick </li>

<li><b>Camisa 20:</b>Lucas Paqueta </li>

<li><b>Camisa 21:</b>Luiz Henrique </li>

<li><b>Camisa 22:</b>Gabriel Martinelli </li>

<li><b>Camisa 23:</b>Ederson Santana </li>

<li><b>Camisa 24:</b>Ibañez </li>

<li><b>Camisa 25:</b>Igor Thiago </li>

<li><b>Camisa 26:</b>Rayan </li>

</ul>

<h3> Artilheiro da Seleção </h3>

<table border="2">

<tr>

<th>Jogador</th>

<th>Gols</th>

</tr>

<tr>

<td> Vini JR </td>

<td> 5 Gols </td>

</tr>

</table>

<img src="https://admin.cnnbrasil.com.br/wp-content/uploads/sites/12/2026/06/gol-vini-jr-brasil-escocia-4-e1782339945487.jpg?w=1200&h=675&crop=1" width="1200" height="675" class="main-img">


<div class="player-modal" id="popup-jogador">

<div class="modal-content">

<button class="close-modal" id="fechar-popup">&times;</button>

<p class="modal-player-name" id="nome-popup"></p>

<img src="" alt="Foto do Jogador" class="modal-player-img" id="foto-popup">

</div>

</div>


<script>

const playerImages = {

"1": "https://upload.wikimedia.org/wikipedia/commons/4/4f/Alisson_Becker_Brazil_V_Morocco_13_June_2026-117_%28cropped%29.jpg", // Alisson Becker

"2": "https://s2-ge.glbimg.com/fw9cZWiM035fupFGg474r7Llygw=/0x0:1024x683/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_bc8228b6673f488aa253bbcb03c80ec5/internal_photos/bs/2025/v/d/p95UE8T6mpWcAJRRIu9g/gettyimages-1725735792.jpg", // Éderson

"3": "https://upload.wikimedia.org/wikipedia/commons/8/8e/Gabriel_Magalhaes_Brazil_V_Morocco_13_June_2026-132_%28cropped%29.jpg", // Gabriel Magalhães

"4": "https://cdn-img.staticzz.com/img/planteis/new/28/75/10842875_marquinhos_20250602095836.jpg", // Marquinhos

"5": "https://upload.wikimedia.org/wikipedia/commons/2/2f/Casemiro_Brazil_V_Morocco_13_June_2026-76_%28cropped%29.jpg", // Casemiro

"6": "https://img.a.transfermarkt.technology/portrait/big/79960-1751370710.jpg?lm=1", // Alex Sandro

"7": "https://admin.cnnbrasil.com.br/wp-content/uploads/sites/12/2026/06/gol-vini-jr-brasil-escocia-4-e1782339945487.jpg?w=1200&h=675&crop=1", // Vinicius Junior

"8": "https://upload.wikimedia.org/wikipedia/commons/7/70/Bruno_Guimaraes_Brazil_V_Morocco_13_June_2026-78_%28cropped%29.jpg", // Bruno Guimarães

"9": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEmVAfBvgk8GBvugs22CqYlWLYLpSd_Bvyxw&s", // Matheus Cunha

"10": "https://admin.cnnbrasil.com.br/wp-content/uploads/sites/12/2026/06/neymar-brasil-escocia-getty-e1782345493707.jpg?w=1200&h=1200&crop=1", // Neymar

"11": "https://www.band.com.br/_next/image?url=https%3A%2F%2Fimg.band.com.br%2Fimage%2F2026%2F06%2F25%2Fraphinha-agradece-aos-torcedores-apos-a-partida-do-brasil-contra-haiti-142527.jpg&w=3840&q=75", // Raphinha

"12": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Weverton_Brazil_V_Morocco_13_June_2026-67_%28cropped%29.jpg/960px-Weverton_Brazil_V_Morocco_13_June_2026-67_%28cropped%29.jpg", // Weverton

"13": "https://veja.abril.com.br/wp-content/uploads/2022/12/GettyImages-1245389887.jpg?crop=1&resize=1212,909", // Danilo Silva

"14": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnpVk6_a_i-Z_I62dcTt9kgg5Ez2OAfGpP5Q&s", // Gleison Bremer

"15": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Leo_Pereira_Brazil_V_Morocco_13_June_2026-136_%28cropped%29.jpg/960px-Leo_Pereira_Brazil_V_Morocco_13_June_2026-136_%28cropped%29.jpg", // Léo Pereira (Padrão Ação)

"16": "https://img.a.transfermarkt.technology/portrait/big/220793-1756746479.png?lm=1", // Douglas Santos (Padrão Ação)

"17": "https://upload.wikimedia.org/wikipedia/commons/d/d0/Fabinho_Brazil_V_Morocco_13_June_2026-70.jpg", // Fabinho

"18": "https://lncimg.lance.com.br/cdn-cgi/image/width=850,quality=75,format=webp/uploads/2026/03/20260331-221612_2411109_3103-1280x1920.jpg", // Danilo Santos (Padrão Ação)

"19": "https://s2-quem.glbimg.com/wLGmmcO9bqJloE37os6LXsTu3_Q=/0x0:1400x950/888x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_b0f0e84207c948ab8b8777be5a6a4395/internal_photos/bs/2026/w/M/LlLRkISDSXho2apEqceg/design-sem-nome-15-.png", // Endrick

"20": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRR9OlkDQOwmuuFcZGa3Ot5kt08Iii5ukOwsQ&s", // Lucas Paqueta

"21": "https://img.a.transfermarkt.technology/portrait/big/800175-1756746940.png?lm=1", // Luiz Henrique

"22": "https://img.a.transfermarkt.technology/portrait/big/655488-1682689091.jpg?lm=1", // Gabriel Martinelli

"23": "https://upload.wikimedia.org/wikipedia/commons/0/02/Ederson_Brazil_V_Morocco_13_June_2026-14_%28cropped%29.jpg", // Ederson Santana

"24": "https://admin.cnnbrasil.com.br/wp-content/uploads/sites/12/2026/06/Ibanez-zagueiro-da-Selecao.jpg?w=419&h=283&crop=0", // Ibañez

"25": "https://img.a.transfermarkt.technology/portrait/big/739443-1770372295.jpg?lm=1", // Igor Thiago (Padrão Estádio)

"26": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpEnn1FpWnifxiZI5R8MXJ1BtNtUYWEMDWMg&s"  // Rayan (Padrão Bola)

};


const lista = document.getElementById('lista-jogadores');

const popup = document.getElementById('popup-jogador');

const popupNome = document.getElementById('nome-popup');

const popupFoto = document.getElementById('foto-popup');

const btnFechar = document.getElementById('fechar-popup');


// Controla os cliques na listagem

lista.querySelectorAll('li').forEach(li => {

li.addEventListener('click', function() {

const textoCamisa = this.querySelector('b').textContent; 

const numeroCamisa = textoCamisa.replace('Camisa ', '').replace(':', '').trim();

const nomeJogador = this.textContent.replace(textoCamisa, '').trim();


// Carrega a URL exclusiva do objeto baseado no número

const urlFoto = playerImages[numeroCamisa];


popupNome.textContent = `Nº ${numeroCamisa} - ${nomeJogador}`;

popupFoto.src = urlFoto;

popup.classList.add('active');

});

});


// Fechamento da janela modal

function fechar() { popup.classList.remove('active'); }

btnFechar.addEventListener('click', fechar);

popup.addEventListener('click', (e) => { if(e.target === popup) fechar(); });

document.addEventListener('keydown', (e) => { if(e.key === 'Escape') fechar(); });

</script>

</body>

</html>

0 comentários:

Postar um comentário

Assinar: Postar comentários (Atom)