<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enquete de Camisas</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#opcoes {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.opcao {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
width: 200px;
text-align: center;
}
.opcao img {
width: 100%;
height: auto;
max-height: 150px;
}
button {
margin-top: 10px;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Qual camisa você gostaria que vendêssemos?</h2>
<div id="opcoes"></div>
<h3>Adicionar Nova Opção</h3>
<input type="text" id="novaCamisa" placeholder="Nome da camisa">
<input type="file" id="imagemCamisa" accept="image/*">
<button onclick="adicionarOpcao()">Adicionar</button>
<script>
let opcoes = JSON.parse(localStorage.getItem("enquete")) || [
{ nome: "Flamengo I 25/26", votos: 5, imagem: "https://via.placeholder.com/150" },
{ nome: "Real Madrid 24/25", votos: 3, imagem: "https://via.placeholder.com/150" }
];
function salvarDados() {
localStorage.setItem("enquete", JSON.stringify(opcoes));
}
function votar(index) {
opcoes[index].votos++;
salvarDados();
renderizarOpcoes();
}
function adicionarOpcao() {
const nome = document.getElementById("novaCamisa").value;
const imagemInput = document.getElementById("imagemCamisa").files[0];
if (nome.trim() === "" || !imagemInput) {
alert("Preencha o nome da camisa e selecione uma imagem.");
return;
}
const leitor = new FileReader();
leitor.onload = function (e) {
opcoes.push({ nome, votos: 0, imagem: e.target.result });
salvarDados();
renderizarOpcoes();
};
leitor.readAsDataURL(imagemInput);
}
function renderizarOpcoes() {
const container = document.getElementById("opcoes");
container.innerHTML = "";
opcoes.sort((a, b) => b.votos - a.votos); // Ordena pelo mais votado
opcoes.forEach((opcao, index) => {
container.innerHTML += `
<div class="opcao">
<img src="${opcao.imagem}" alt="${opcao.nome}">
<p>${opcao.nome}</p>
<p><strong>${opcao.votos} votos</strong></p>
<button onclick="votar(${index})">Votar</button>
</div>
`;
});
}
renderizarOpcoes();
</script>
</body>
</html>