No mundo cada vez mais digitalizado de hoje, os sistemas de senhas de atendimento online oferecem uma maneira eficiente e organizada de gerenciar o fluxo de clientes e oferecer um serviço mais rápido e justo. Neste artigo, vamos criar um sistema de senhas de atendimento online utilizando HTML, CSS e JavaScript. Vamos explicar cada parte do código para garantir que você entenda como funciona e possa personalizá-lo conforme suas necessidades.
Passo 1: Estrutura Básica HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Senhas de Atendimento Online</title>
<!-- Estilos CSS -->
<style>
/* Estilos CSS aqui */
</style>
</head>
<body>
<!-- Conteúdo HTML aqui -->
</body>
</html>
Começamos com a estrutura básica do HTML, incluindo a declaração do tipo de documento, a definição do idioma, as meta tags para codificação de caracteres e visualização responsiva, e o título da página. Também incluímos uma seção para estilos CSS, que será explicada mais tarde.
Passo 2: Layout e Estilos CSS
/* Estilos CSS */
body, html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
/* Estilos para botões */
}
#resultado {
/* Estilos para o resultado */
}
h1 {
/* Estilos para o cabeçalho */
}
Nesta seção, definimos os estilos CSS para o corpo da página, o container que centraliza o conteúdo, os botões de seleção, o resultado e o cabeçalho. Esses estilos garantem que nossa página seja responsiva e visualmente atraente.
Passo 3: Estrutura do Conteúdo HTML
<h1>Escolha uma das opções</h1>
<div class="container">
<button id="inteiroBtn">Normal</button>
<button id="meiaBtn">Preferencial</button>
<div id="resultado"></div>
</div>
Aqui, definimos o conteúdo principal da página, incluindo um título, dois botões para seleção de tipo de atendimento (normal e preferencial) e uma área para exibir o resultado da seleção.
Passo 4: Funcionalidade JavaScript
Aqui começamos a parte mais crucial do nosso sistema. O JavaScript é responsável por gerenciar a lógica de geração e exibição de senhas, bem como a contagem de atendimentos realizados.
Passo 5: Lógica JavaScript -Sistema de Senhas de Atendimento Online
// JavaScript para gerenciar a lógica de senhas
// Verificar se há uma data armazenada no armazenamento local
let lastAccessDate = localStorage.getItem('lastAccessDate');
// Se não houver data armazenada ou a data armazenada for diferente da data atual, reiniciar o contador
if (!lastAccessDate || new Date(lastAccessDate).getDate() !== new Date().getDate()) {
localStorage.setItem('lastAccessDate', new Date()); // Armazenar a nova data
localStorage.setItem('contador', 0); // Reiniciar o contador
}
// Obter o contador do armazenamento local
let contador = parseInt(localStorage.getItem('contador')) || 0;
// Adicionar ouvintes de eventos aos botões de seleção
document.getElementById('inteiroBtn').addEventListener('click', function() {
contador++;
imprimirResultado('Normal', contador);
});
document.getElementById('meiaBtn').addEventListener('click', function() {
contador++;
imprimirResultado('Preferencial', contador);
});
// Função para imprimir o resultado da seleção
function imprimirResultado(tipo, numero) {
let numeroFormatado = pad(numero, 3);
// Cria o conteúdo a ser impresso
let conteudo = '<div style="text-align: center; font-size: 24px;">';
conteudo += '<div style="width:80%;background-color: #f2f2f2; border: 1px solid #ccc; padding: 5%; display: inline-block;">';
conteudo += '<h1 style="font-size: 36px;">Número</h1>';
conteudo += '<p style="font-size: 48px;">' + numeroFormatado + '</p>';
conteudo += '<hr style="border-style: dashed;">';
conteudo += '<p style="font-size: 36px;width:96%;padding:2%;border:solid 1px black">' + tipo + '</p>';
conteudo += '</div>';
conteudo += '</div>';
// Abrir a janela de impressão
let janelaImpressao = window.open('', '_blank');
janelaImpressao.document.write('<html><head><title>Resultado</title></head><body>');
janelaImpressao.document.write(conteudo);
janelaImpressao.document.write('</body></html>');
janelaImpressao.document.close();
janelaImpressao.print();
// Atualizar o contador no armazenamento local
localStorage.setItem('contador', contador);
}
// Função para preencher números com zeros à esquerda
function pad(num, size) {
let s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
Nesta parte do código, inicializamos o contador de atendimentos e verificamos se é um novo dia. Depois, adicionamos ouvintes de eventos aos botões de seleção para incrementar o contador e imprimir o resultado quando um botão é clicado. A função imprimirResultado cria o conteúdo a ser exibido e abre uma nova janela para impressão. A função pad é responsável por preencher os números com zeros à esquerda, garantindo uma formatação consistente.
Com isso, nosso sistema de senhas de atendimento online está completo e pronto para ser implementado em seu projeto!
Este artigo fornece uma visão geral do processo de criação de um sistema de senhas de atendimento online usando HTML, CSS e JavaScript. Esperamos que este guia passo a passo tenha sido útil para você entender como funciona cada parte do código e como pode ser adaptado às suas necessidades específicas. Se tiver alguma dúvida ou sugestão, não hesite em entrar em contato
Codigo completo do sistema !
Veja o sistema funcionando : https://owx.com.br/teste.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Senhas de atendimento online</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
padding: 20px 40px;
font-size: 24px;
background-color: #f2f2f2;
border: 2px solid #ccc;
cursor: pointer;
width: 50%;
max-width: 300px; /* Limitando a largura máxima para não ficar muito grande em telas grandes */
}
.container {
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
margin: 0 10px;
font-size: 50px;
}
#resultado {
margin-top: 20px;
text-align:center;
font-size: 100px;
}
h1{font-size:100px;text-align:center;}
</style>
</head>
<body>
<h1>Escolha uma das opções</h1>
<div class="container">
<button id="inteiroBtn">Normal</button>
<button id="meiaBtn">Preferencial</button>
<div id="resultado"></div>
</div>
<script>
// Verificar se há uma data armazenada no armazenamento local
let lastAccessDate = localStorage.getItem('lastAccessDate');
// Se não houver data armazenada ou a data armazenada for diferente da data atual, reiniciar o contador
if (!lastAccessDate || new Date(lastAccessDate).getDate() !== new Date().getDate()) {
localStorage.setItem('lastAccessDate', new Date()); // Armazenar a nova data
localStorage.setItem('contador', 0); // Reiniciar o contador
}
// Obter o contador do armazenamento local
let contador = parseInt(localStorage.getItem('contador')) || 0;
document.getElementById('inteiroBtn').addEventListener('click', function() {
contador++;
imprimirResultado('Normal', contador);
});
document.getElementById('meiaBtn').addEventListener('click', function() {
contador++;
imprimirResultado('Preferencial', contador);
});
function imprimirResultado(tipo, numero) {
let numeroFormatado = pad(numero, 3);
// Cria o conteúdo a ser impresso
let conteudo = '<div style="text-align: center; font-size: 24px;">';
conteudo += '<div style="width:80%;background-color: #f2f2f2; border: 1px solid #ccc; padding: 5%; display: inline-block;">'; // Aumentando o padding para 20px
conteudo += '<h1 style="font-size: 36px;">Número</h1>';
conteudo += '<p style="font-size: 48px;">' + numeroFormatado + '</p>';
conteudo += '<hr style="border-style: dashed;">';
conteudo += '<p style="font-size: 36px;width:96%;padding:2%;border:solid 1px black">' + tipo + '</p>';
conteudo += '</div>';
conteudo += '</div>';
// Abrir a janela de impressão
let janelaImpressao = window.open('', '_blank');
janelaImpressao.document.write('<html><head><title>Resultado</title></head><body>');
janelaImpressao.document.write(conteudo);
janelaImpressao.document.write('</body></html>');
janelaImpressao.document.close();
janelaImpressao.print();
// Atualizar o contador no armazenamento local
localStorage.setItem('contador', contador);
}
function pad(num, size) {
let s = num + "";
while (s.length < size) s = "0" + s;
return s;
}
// Contate o desenvolvedor : 32988511462
</script>
</body>
</html>