Sistema de Sorteio Eletrônico - rev. 1.5.html
por Polliana Henemberg
—
última modificação
29/04/2026 15h07
Sistema de Sorteio Eletrônico - rev. 1.5.html
—
HTML,
8 KB (8896 bytes)
Conteúdo do arquivo
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorteio - Comissão Especial de Licitação</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #eef2f7;
}
/* Cabeçalho institucional */
.header {
background-color: #ffffff;
border-bottom: 4px solid #0f2f6b;
}
/* Container principal */
.main-card {
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* Destaque institucional */
.title-bar {
background: linear-gradient(135deg, #0f2f6b, #1d4ed8);
}
/* Animações */
.name-item {
animation: fadeUp 0.5s ease-out forwards;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.pulse {
animation: pulse 1s infinite;
}
@keyframes pulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- CABEÇALHO FIXO -->
<header class="header fixed top-0 left-0 w-full z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-center">
<img src="Novo Logo CMA.png"
alt="Câmara Municipal de Araucária"
class="h-16 md:h-20 object-contain">
</div>
</header>
<!-- ESPAÇO PARA COMPENSAR HEADER FIXO -->
<div class="h-28"></div>
<!-- CONTEÚDO -->
<main class="flex-grow flex items-center justify-center px-4">
<div class="main-card w-full max-w-3xl overflow-hidden">
<!-- TÍTULO -->
<div class="title-bar text-white text-center p-8">
<h1 class="text-3xl md:text-4xl font-extrabold">
Comissão Especial de Licitação
</h1>
<p class="mt-2 text-blue-100 text-lg">
Chamamento Público nº 01/2025
</p>
</div>
<!-- CONTEÚDO INTERNO -->
<div class="p-8 space-y-6">
<!-- INPUT -->
<div id="setup-area">
<label class="block text-lg font-semibold text-gray-700 mb-3">
Inserir participantes (um por linha):
</label>
<textarea id="names-input" rows="8"
class="w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-700 outline-none text-lg"
placeholder="Nome 1 Nome 2 Nome 3..."></textarea>
<button onclick="startProcess()"
class="w-full mt-6 bg-[#0f2f6b] hover:bg-[#0b2554] text-white text-lg font-bold py-4 rounded-xl shadow-lg transition">
Iniciar Sorteio
</button>
</div>
<!-- AÇÃO -->
<div id="action-area" class="hidden">
<div id="countdown-display" class="text-center py-12">
<div id="countdown-number"
class="text-9xl font-black text-[#0f2f6b] pulse">3</div>
<p class="mt-4 text-gray-500 text-lg">
Preparando sorteio...
</p>
</div>
<div id="results-display" class="hidden">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h2 class="text-xl font-bold text-gray-800">
Ordem de Sorteio
</h2>
<span id="counter"
class="bg-blue-100 text-blue-800 px-4 py-1 rounded-full font-semibold">
0 de 0
</span>
</div>
<ul id="names-list" class="space-y-3"></ul>
<div id="finish-actions" class="hidden mt-6 space-y-3">
<button onclick="downloadLog()"
class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-3 rounded-xl">
Baixar Relatório
</button>
<button onclick="resetApp()"
class="w-full border border-gray-300 text-gray-600 py-3 rounded-xl">
Novo Sorteio
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- RODAPÉ -->
<footer class="text-center text-gray-400 text-sm py-4">
Câmara Municipal de Araucária • Sistema Oficial de Sorteio
</footer>
<script>
let shuffledNames = [];
let currentIndex = 0;
let drawTimestamp = "";
function startProcess() {
const input = document.getElementById('names-input').value;
const names = input.split('\n').map(n => n.trim()).filter(n => n);
if (!names.length) return;
document.getElementById('setup-area').classList.add('hidden');
document.getElementById('action-area').classList.remove('hidden');
shuffledNames = [...names];
for (let i = shuffledNames.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledNames[i], shuffledNames[j]] = [shuffledNames[j], shuffledNames[i]];
}
runCountdown();
}
function runCountdown() {
let count = 3;
const el = document.getElementById('countdown-number');
const timer = setInterval(() => {
count--;
if (count > 0) el.innerText = count;
else if (count === 0) el.innerText = "!";
else {
clearInterval(timer);
document.getElementById('countdown-display').classList.add('hidden');
startDrawing();
}
}, 1000);
}
function startDrawing() {
const list = document.getElementById('names-list');
const counter = document.getElementById('counter');
drawTimestamp = new Date().toLocaleString('pt-BR');
document.getElementById('results-display').classList.remove('hidden');
list.innerHTML = "";
currentIndex = 0;
const interval = setInterval(() => {
if (currentIndex < shuffledNames.length) {
const li = document.createElement('li');
li.className = "name-item flex items-center p-4 bg-gray-50 rounded-xl border";
li.innerHTML = `
<span class="w-10 h-10 flex items-center justify-center bg-[#0f2f6b] text-white rounded-full font-bold mr-4">
${currentIndex + 1}
</span>
<span class="text-lg font-semibold text-gray-700">
${shuffledNames[currentIndex]}
</span>
`;
list.appendChild(li);
currentIndex++;
counter.innerText = `${currentIndex} de ${shuffledNames.length}`;
} else {
clearInterval(interval);
document.getElementById('finish-actions').classList.remove('hidden');
}
}, 1000);
}
function downloadLog() {
let content = "ATA DE SORTEIO\n";
content += "========================\n";
content += `Data/Hora: ${drawTimestamp}\n\n`;
shuffledNames.forEach((n, i) => {
content += `${i + 1}. ${n}\n`;
});
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = "resultado_sorteio.txt";
a.click();
URL.revokeObjectURL(url);
}
function resetApp() {
location.reload();
}
</script>
</body>
</html>