Skip to content

Commit

Permalink
ui increments
Browse files Browse the repository at this point in the history
  • Loading branch information
@migmoroni
migmoroni committed Jan 6, 2024
1 parent 45bc305 commit cbad32a
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 121 deletions.
174 changes: 61 additions & 113 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,56 +34,71 @@
<body>
<div id="main-window">

<div>
<div class="form-container">
<div id="question-mark" onclick="showInfo('popup-content-template-1', '1')">&#x003F</div>

<div id="settings-btn" onclick="showInfo('settings-popup-content-template-1', '2')">&#x2699</div>
</div>

<h1>Remember Password</h1>

<div>
<div class="form-container">
<div class="form-header">Senha de Códigos</div>
<form id="form1" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite o código">
</form>
<div class="password-strength-bar" id="password-strength-bar-1"></div>
</div>

<div class="form-container">
<div class="form-header">Senha de Palavras</div>
<form id="form2" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite as palavras">
</form>
<div class="password-strength-bar" id="password-strength-bar-2"></div>
</div>
<div class="form-container">
<h1>Remember Password</h1>
</div>

<div>
<div class="form-container">
<div class="form-header">Senha Específica</div>
<form id="form3" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite a senha">
</form>
<div class="password-strength-bar" id="password-strength-bar-3"></div>
</div>
</div>
<div class="form-container">
<fieldset class="form-container">
<label class="form-container" for="characterSet">Dados de sua senha</label>

<div class="form-container">
<label class="form-header">Senha de Códigos</label>
<form id="form1" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite o código">
</form>
<div class="password-strength-bar" id="password-strength-bar-1"></div>
</div>

<div>
<div class="form-container">
<div class="form-header">Configurações ativas</div>
<form id="form4">
<input class="formConfig" type="text" id="formConfig1" name="config1" value="20" readonly>
</form>
<form id="form5">
<input class="formConfig" type="text" id="formConfig2" name="config2" value="20" readonly>
</form>
</div>
</div>
<div class="form-container">
<label class="form-header">Senha de Palavras</label>
<form id="form2" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite as palavras">
</form>
<div class="password-strength-bar" id="password-strength-bar-2"></div>
</div>

<div class="form-container">
<label class="form-header">Senha Específica</label>
<form id="form3" autocomplete="off">
<input type="password" class="password-input" placeholder="Digite a senha">
</form>
<div class="password-strength-bar" id="password-strength-bar-3"></div>
</div>
</fieldset>

<div class="form-container">
<button id="config-btn" onclick="showInfo('settings-popup-content-template-2', '2')">Alterar Configurações</button>
<fieldset class="config-password">
<div>
<div class="form-container dropdown">
<label class="form-header">Caracteres</label>
<div>
<select id="form4" class="password-input-left" onchange="toggleDropdown()">
<option class="optiona" value="all" selected>Números, Letras e simbolos</option>
<option class="optiona" value="decimal">Apenas Números</option>
<option class="optiona" value="letters">Apenas Letras</option>
<option class="optiona" value="unicode">Unicode</option>
</select>
</div>
<div class="password-strength-bar" id="password-strength-bar-4"></div>
</div>
</div>

<div>
<div class="form-container">
<label class="form-header">Tamanho</label>
<form id="form5" autocomplete="off">
<input type="text" class="password-input" placeholder="Digite o valor de caracteres">
</form>
<div class="password-strength-bar" id="password-strength-bar-4"></div>
</div>
</div>
</fieldset>
</div>

<div class="form-container">
Expand Down Expand Up @@ -315,79 +330,12 @@ <h3>Tamanho da Senha</h3>
</div>
<div class="settings-window">
<div>
<div class="option">
<label>
<input type="radio" name="size" value="4"><span></span> 4 Caracteres
</label>
<!--<p>Complexidade: <input type="text" id="text-complex-s-t-1" placeholder="" readonly></p>-->
</div>

<div class="option">
<label>
<input type="radio" name="size" value="5"><span></span> 5 Caracteres
</label>
<div class="form-container-popup">
<div class="form-header">Informe a quantia de caracteres que deseja:</div>
<form id="formNumber" autocomplete="off">
<input type="text" class="password-input-popup" placeholder="Digite a senha">
</form>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="6"><span></span> 6 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="8"><span></span> 8 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="10"><span></span> 10 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="12"><span></span> 12 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="15"><span></span> 15 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="20" checked><span></span> 20 Caracteres (Padrão)
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="25"><span></span> 25 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="30"><span></span> 30 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="40"><span></span> 40 Caracteres
</label>
</div>

<div class="option">
<label>
<input type="radio" name="size" value="50"><span></span> 50 Caracteres
</label>
</div>
</div>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions scripts/password-engine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,5 +176,5 @@ async function encodeBase100(data) {


//770 linhas maximas
//4 idiomas
//-> PT-BR, EN-US, ESPA, FRAN
//3 idiomas
//-> PT-BR, EN-US e ESPA
25 changes: 25 additions & 0 deletions scripts/ui-effects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ function togglePopup(text) {
const popupContent = document.getElementById('popup-content');
popupContent.innerText = text;
const okButton = document.getElementById('ok-btn');


// Configura o texto e exibe o popupContent
popupContent.style.display = 'block';
Expand All @@ -21,6 +22,11 @@ function togglePopup(text) {
popup.style.display = 'block';
}

function toggleDropdown() {
const dropdown = document.querySelector('.dropdown');
dropdown.classList.toggle('active');
}

// Função que fecha os menus
function closePopup() {
document.getElementById('popup').style.display = 'none';
Expand Down Expand Up @@ -223,6 +229,25 @@ function calculateCombinedStrength() {

}

function check(name, value) {
const template = document.getElementsByTagName(name);
const content = template.innerHTML;

if (window === '1'){ //Menu Info
document.getElementById('popup-content').innerHTML = content;
document.getElementById('popup').style.display = 'block';
document.body.classList.add('modal-open');
} if (window === '2'){ //Menu Config
document.getElementById('settings-popup-content').innerHTML = content;
document.getElementById('settings-popup').style.display = 'block';
document.body.classList.add('modal-open');
} else { //Menu Donate
document.getElementById('donation-popup-content').innerHTML = content;
document.getElementById('donation-popup').style.display = 'block';
document.body.classList.add('modal-open');
}
}

// Atualiza a força combinada sempre que as barras individuais são atualizadas
document.getElementById('form1').addEventListener('input', function () {
const password = this.querySelector('.password-input').value;
Expand Down
28 changes: 28 additions & 0 deletions styles/navigator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ input::-webkit-reveal {
display: none;
}


/* Para navegadores Firefox */
::-moz-scrollbar {
width: 12px;
Expand Down Expand Up @@ -65,4 +66,31 @@ background-color: #f1f1f1;
/* Estilo para ocultar o botão de revelação de senha no Edge */
input::-ms-reveal {
display: none;
}

select {
appearance: none; /* Remove a aparência padrão do sistema operacional */
-webkit-appearance: none; /* Para compatibilidade com navegadores baseados no WebKit (Chrome, Safari) */
-moz-appearance: none; /* Para compatibilidade com navegadores baseados no Gecko (Firefox) */
-ms-appearance: none;
padding: 10px; /* Adiciona algum preenchimento interno para melhorar a aparência */
font-size: 14px; /* Define o tamanho da fonte */
border: 2px solid #ccc; /* Adiciona uma borda */
border-radius: 8px; /* Adiciona bordas arredondadas */
background-color: #fff; /* Cor de fundo */
width: 200px; /* Largura do select */
}

/* Estilização dos elementos option dentro de um select */
select option {
padding: 15px; /* Adiciona algum preenchimento interno para melhorar a aparência */
font-size: 15px; /* Define o tamanho da fonte */
line-height: 2; /* Ajuste a altura conforme necessário */
min-height: 40px; /* Altura mínima para garantir uma boa visualização */
}
/* Estilização para quando o select está aberto (ativo) */
select:focus {
outline: none; /* Remove o contorno padrão ao focar */
border-color: #007bff; /* Adiciona uma borda azul quando o select está focado */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona uma sombra ao focar */
}
40 changes: 34 additions & 6 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ h1 {
text-align: center;
}

legend {
text-align: center;
}

.password-strength-bar {
height: 10px;
background-color: #007bff;
Expand Down Expand Up @@ -51,6 +55,14 @@ h1 {
flex-direction: column;
}

.form-container-popup {
margin-bottom: 20px;
display: flex;
align-items: left;
justify-content: left;
flex-direction: column;
}

.form-header {
font-size: 18px;
margin-bottom: 10px;
Expand All @@ -59,6 +71,7 @@ h1 {
.password-input {
width: 200px;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
text-align: center;
}
Expand All @@ -69,10 +82,24 @@ h1 {
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona uma sombra azul suave quando em foco */
}

.password-input-left {
width: 225px;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
text-align: left;
}

.password-input-left:focus {
outline: none; /* Remove a borda padrão do foco */
border-color: #007bff; /* Define a cor da borda para azul quando em foco */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adiciona uma sombra azul suave quando em foco */
}

.tabs-container {
display: flex;
flex-direction: column;
flex-wrap:wrap;
flex-wrap: wrap;
margin-bottom: 10px;
} /* tentativa de corrigir os infos*/

Expand Down Expand Up @@ -372,10 +399,6 @@ h1 {
margin-right: 10px;
}

.option {
padding: 0px;
}

.formConfig {
user-select: none;
pointer-events: none;
Expand All @@ -389,6 +412,10 @@ h1 {
outline: none; /* Remove a borda de foco ao clicar */
}

option {
height: 50px;
}

/* Estilo personalizado para o input radio oculto */
input[type="radio"] {
display: none;
Expand Down Expand Up @@ -424,4 +451,5 @@ input[type="radio"]:checked + span::before {
/* Estilo para o texto ao lado do indicador */
input[type="radio"] + span + label {
margin-left: 10px;
}
}

0 comments on commit cbad32a

Please sign in to comment.