<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bingo Profissional - Papelaria Universitária</title>
<style>
/* Estilo Geral */
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
text-align: center;
background: #2c3e50;
color: white;
margin: 0;
padding: 20px;
overflow-x: hidden;
}
/* Logomarca no Canto Superior Direito */
.logo {
position: absolute;
top: 100px;
right: 20px;
width: 400px;
height: auto;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
background: white; /* Fundo branco caso a imagem tenha transparência */
padding: 5px;
}
h1 {
color: #ecf0f1;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 10px;
}
/* O "Globo" / Telão */
#telao {
font-size: 160px;
font-weight: bold;
color: #f1c40f;
background: #34495e;
width: 250px;
height: 250px;
line-height: 250px;
margin: 20px auto;
border-radius: 50%;
border: 10px solid #f1c40f;
box-shadow: 0 0 30px rgba(0,0,0,0.6);
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
/* Histórico */
.historico-container {
margin-bottom: 25px;
font-size: 20px;
color: #bdc3c7;
background: rgba(0,0,0,0.2);
display: inline-block;
padding: 10px 20px;
border-radius: 30px;
}
#historico { font-weight: bold; color: #f1c40f; }
/* Quadro de Números */
.quadro {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 10px;
max-width: 950px;
margin: 0 auto;
background: #34495e;
padding: 20px;
border-radius: 15px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.numero {
padding: 12px 0;
background: #2c3e50;
border-radius: 6px;
color: #7f8c8d;
font-size: 20px;
transition: all 0.4s ease;
}
.sorteado {
background: #27ae60;
color: white;
font-weight: bold;
transform: scale(1.1);
box-shadow: 0 0 15px #27ae60;
}
/* Botões */
.controles { margin: 40px; }
button {
padding: 18px 50px;
font-size: 22px;
cursor: pointer;
border: none;
border-radius: 50px;
color: white;
font-weight: bold;
text-transform: uppercase;
transition: 0.2s;
outline: none;
}
#btnSortear {
background: #2980b9;
box-shadow: 0 6px #1f6391;
}
#btnSortear:active {
box-shadow: 0 0 #1f6391;
transform: translateY(6px);
}
#btnReset {
background: #e74c3c;
margin-left: 25px;
font-size: 16px;
padding: 12px 30px;
}
#btnReset:hover { background: #c0392b; }
</style>
</head>
<body>
<img src="logo.jpg" class="logo" alt="Papelaria Universitária">
<h1>BINGO VIRTUAL - PAPELARIA UNIVERSITÁRIA</h1>
<div id="telao">-</div>
<div class="historico-container">
Últimos sorteados: <span id="historico">Nenhum</span>
</div>
<div class="controles">
<button id="btnSortear" onclick="sortear()">Sortear Número</button>
<button id="btnReset" onclick="resetar()">Reiniciar Jogo</button>
</div>
<div class="quadro" id="quadro"></div>
<script>
let sorteados = [];
const quadro = document.getElementById('quadro');
const telao = document.getElementById('telao');
const historicoElemento = document.getElementById('historico');
// Gera o quadro de 1 a 75 na inicialização
function criarQuadro() {
quadro.innerHTML = '';
for (let i = 1; i <= 75; i++) {
let div = document.createElement('div');
div.className = 'numero';
div.id = 'num-' + i;
div.innerText = i;
quadro.appendChild(div);
}
}
// Função de Voz (Sintese de fala)
function falar(texto) {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel(); // Para falas anteriores para não encavalar
const msg = new SpeechSynthesisUtterance();
msg.text = texto;
msg.lang = 'pt-BR';
msg.rate = 1.0;
window.speechSynthesis.speak(msg);
}
}
function atualizarHistorico() {
if (sorteados.length <= 1) return;
// Pega os 5 números anteriores ao atual
let ultimos = [...sorteados].reverse().slice(1, 6);
historicoElemento.innerText = ultimos.join(" - ");
}
function sortear() {
if (sorteados.length >= 75) {
falar("Fim de jogo. Todos os números já foram sorteados.");
alert("Fim do jogo!");
return;
}
let num;
do {
num = Math.floor(Math.random() * 75) + 1;
} while (sorteados.includes(num));
sorteados.push(num);
// Efeito visual no telão
telao.innerText = num;
// Marca no quadro
const celula = document.getElementById('num-' + num);
celula.classList.add('sorteado');
// Atualiza histórico e fala o número
atualizarHistorico();
falar("Número " + num);
}
function resetar() {
if (confirm("Deseja realmente reiniciar o bingo da Papelaria Universitária?")) {
sorteados = [];
telao.innerText = "-";
historicoElemento.innerText = "Nenhum";
criarQuadro();
falar("O jogo foi reiniciado. Boa sorte a todos!");
}
}
// Inicia o app
criarQuadro();
</script>
</body>
</html>
