Sistema de gerador de senhas
Estou desenvolvendo um sistema rudimentar para gerar senhas para uma triagem de digitação de currículo até o momento consegui só esse progresso:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Senha</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#senha {
font-size: 24px;
margin-top: 20px;
}
#nomeTela2 {
font-size: 32px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Tela 1: Insira o nome -->
<div class="container" id="tela-1">
<h2>Próximo a ser atendido: </h2>
<input type="text" id="nomeInput" placeholder="Seu nome">
<button onclick="gerarSenha()">Gerar Senha</button>
</div>
<!-- Tela 2: Exiba a senha e o nome -->
<div class="container" id="tela-2" style="display: none;">
<h2 id="nomeTela2"></h2>
<p id="senha"></p>
<button onclick="mostrarMaiorResolucao()">Ver em Maior Resolução</button>
<button onclick="voltarInicio()">Voltar para o Início</button>
<div id="historicoSenhas">
<h3>Histórico de Senhas</h3>
<ol id="historico"></ol>
<button onclick="mostrarHistoricoCompleto()">Mostrar Histórico Completo</button>
</div>
</div>
<!-- Tela 3: Exiba em maior resolução -->
<div class="container" id="tela-3" style="display: none;">
<h2>Resolução Maior</h2>
<p id="nomeMaior"></p>
<p id="senhaMaior"></p>
<button onclick="voltar()">Voltar</button>
</div>
<script>
let contadorSenhas = 1;
let historicoCompleto = [];
function gerarSenha() {
let nome = document.getElementById('nomeInput').value;
let senha = contadorSenhas.toString().padStart(2, '0'); // Gera uma senha de dois dígitos
// Atualiza o contador de senhas
contadorSenhas++;
// Adiciona a senha ao histórico completo
historicoCompleto.unshift({nome: nome, senha: senha});
// Limita o histórico a 10 itens
if (historicoCompleto.length > 10) {
historicoCompleto.pop();
}
// Exibe a senha na tela 2
document.getElementById('senha').innerText = senha;
document.getElementById('nomeTela2').innerText = nome;
// Atualiza o histórico de senhas na tela 2
let historico = document.getElementById('historico');
historico.innerHTML = ''; // Limpa o conteúdo atual do histórico
historicoCompleto.forEach(item => {
let li = document.createElement('li');
li.textContent = `${item.nome}: ${item.senha}`;
historico.appendChild(li);
});
// Mostra a tela 2 e esconde a tela 1
document.getElementById('tela-1').style.display = 'none';
document.getElementById('tela-2').style.display = 'block';
}
function mostrarMaiorResolucao() {
// Recupera a última senha gerada
let ultimaSenha = (contadorSenhas - 1).toString().padStart(2, '0');
// Exibe a senha e o nome em maior resolução (tela 3)
document.getElementById('nomeMaior').innerText = `Nome: ${document.getElementById('nomeTela2').innerText}`;
document.getElementById('senhaMaior').innerText = `Senha: $`;
// Mostra a tela 3 e esconde a tela 2
document.getElementById('tela-2').style.display = 'none';
document.getElementById('tela-3').style.display = 'block';
}
function voltar() {
// Volta para a tela 2
document.getElementById('tela-3').style.display = 'none';
document.getElementById('tela-2').style.display = 'block';
}
function voltarInicio() {
// Volta para a tela 1 e limpa o campo de nome
document.getElementById('tela-2').style.display = 'none';
document.getElementById('tela-1').style.display = 'block';
document.getElementById('nomeInput').value = ''; // Limpa o campo de nome
}
function mostrarHistoricoCompleto() {
let historico = document.getElementById('historico');
historico.innerHTML = ''; // Limpa o conteúdo atual do histórico
historicoCompleto.forEach(item => {
let li = document.createElement('li');
li.textContent = `${item.nome}: ${item.senha}`;
historico.appendChild(li);
});
}
</script>
</body>
</html>
Preciso adicionar a seguintes funcionalidades a ele:
1- Usar integração com banco de dados
2- Tem como usar em 3 telas? pois são tres servidores
3- o registro ter como colocar só para aparecer os 10 ultimos
4- ter como excluir o nome quando clica em voltar para o inicio
Será que alguém pode me ajudar?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gerador de Senha</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#senha {
font-size: 24px;
margin-top: 20px;
}
#nomeTela2 {
font-size: 32px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Tela 1: Insira o nome -->
<div class="container" id="tela-1">
<h2>Próximo a ser atendido: </h2>
<input type="text" id="nomeInput" placeholder="Seu nome">
<button onclick="gerarSenha()">Gerar Senha</button>
</div>
<!-- Tela 2: Exiba a senha e o nome -->
<div class="container" id="tela-2" style="display: none;">
<h2 id="nomeTela2"></h2>
<p id="senha"></p>
<button onclick="mostrarMaiorResolucao()">Ver em Maior Resolução</button>
<button onclick="voltarInicio()">Voltar para o Início</button>
<div id="historicoSenhas">
<h3>Histórico de Senhas</h3>
<ol id="historico"></ol>
<button onclick="mostrarHistoricoCompleto()">Mostrar Histórico Completo</button>
</div>
</div>
<!-- Tela 3: Exiba em maior resolução -->
<div class="container" id="tela-3" style="display: none;">
<h2>Resolução Maior</h2>
<p id="nomeMaior"></p>
<p id="senhaMaior"></p>
<button onclick="voltar()">Voltar</button>
</div>
<script>
let contadorSenhas = 1;
let historicoCompleto = [];
function gerarSenha() {
let nome = document.getElementById('nomeInput').value;
let senha = contadorSenhas.toString().padStart(2, '0'); // Gera uma senha de dois dígitos
// Atualiza o contador de senhas
contadorSenhas++;
// Adiciona a senha ao histórico completo
historicoCompleto.unshift({nome: nome, senha: senha});
// Limita o histórico a 10 itens
if (historicoCompleto.length > 10) {
historicoCompleto.pop();
}
// Exibe a senha na tela 2
document.getElementById('senha').innerText = senha;
document.getElementById('nomeTela2').innerText = nome;
// Atualiza o histórico de senhas na tela 2
let historico = document.getElementById('historico');
historico.innerHTML = ''; // Limpa o conteúdo atual do histórico
historicoCompleto.forEach(item => {
let li = document.createElement('li');
li.textContent = `${item.nome}: ${item.senha}`;
historico.appendChild(li);
});
// Mostra a tela 2 e esconde a tela 1
document.getElementById('tela-1').style.display = 'none';
document.getElementById('tela-2').style.display = 'block';
}
function mostrarMaiorResolucao() {
// Recupera a última senha gerada
let ultimaSenha = (contadorSenhas - 1).toString().padStart(2, '0');
// Exibe a senha e o nome em maior resolução (tela 3)
document.getElementById('nomeMaior').innerText = `Nome: ${document.getElementById('nomeTela2').innerText}`;
document.getElementById('senhaMaior').innerText = `Senha: $`;
// Mostra a tela 3 e esconde a tela 2
document.getElementById('tela-2').style.display = 'none';
document.getElementById('tela-3').style.display = 'block';
}
function voltar() {
// Volta para a tela 2
document.getElementById('tela-3').style.display = 'none';
document.getElementById('tela-2').style.display = 'block';
}
function voltarInicio() {
// Volta para a tela 1 e limpa o campo de nome
document.getElementById('tela-2').style.display = 'none';
document.getElementById('tela-1').style.display = 'block';
document.getElementById('nomeInput').value = ''; // Limpa o campo de nome
}
function mostrarHistoricoCompleto() {
let historico = document.getElementById('historico');
historico.innerHTML = ''; // Limpa o conteúdo atual do histórico
historicoCompleto.forEach(item => {
let li = document.createElement('li');
li.textContent = `${item.nome}: ${item.senha}`;
historico.appendChild(li);
});
}
</script>
</body>
</html>
Preciso adicionar a seguintes funcionalidades a ele:
1- Usar integração com banco de dados
2- Tem como usar em 3 telas? pois são tres servidores
3- o registro ter como colocar só para aparecer os 10 ultimos
4- ter como excluir o nome quando clica em voltar para o inicio
Será que alguém pode me ajudar?
Barbara
Curtidas 0