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 22, 2024
1 parent 3d7c664 commit 7cf13e4
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 12 deletions.
122 changes: 113 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,7 @@ <h1>Remember Password</h1>
<p class="margin-top-25">OU</p>
</div>
<div class="form-container">
<input type="file" id="fileInput3" onchange="readWordsFromFile()" style="display: none;">
<label for="fileInput2" class="choose-btn">Lista de serviços</label>
<label class="choose-btn" onclick="showInfo('service-popup-content-template-1', '3')">Lista de serviços</label>
</div>
<div class="password-strength-bar margin-bottom-25" id="password-strength-bar-3"></div>
</div>
Expand Down Expand Up @@ -415,17 +414,122 @@ <h2>Padrões Específicos</h2>

<!---->

<div id="donation-popup">
<div id="donation-popup-content-template-1" style="display: none;">
<!-- Conteúdo da janela de serviços -->

<div id="service-popup">
<div class="tabs-container">
<div class="tab" onclick="showInfo('service-popup-content-template-1', '3')">Idioma preferido</div>
<div class="tab" onclick="showInfo('service-popup-content-template-2', '3')">Padrões Gerais</div>
<div class="tab" onclick="showInfo('service-popup-content-template-3', '3')">Padrões Específicos</div>
</div>
<div id="service-popup-content" class="tab-content"></div>
<div class="ok-button">
<button id="ok-btn" onclick="closePopup()">Voltar</button>
</div>
</div>

<div id="service-text">
<div id="service-popup-content-template-1" style="display: none;">
<div>
<h2>Idioma preferido</h2>
<p>Escolha o idioma</p>
</div>
<div class="service-window">

<div class="option">
<label>
<input type="radio" name="language" value="pt-br" checked><span></span> Português (Brasil)
</label>
</div>

<div class="option">
<label>
<input type="radio" name="language" value="en-us"><span></span> English (United States)
</label>
</div>

</div>
</div>

<div id="service-popup-content-template-2" style="display: none;">
<div>
<h2>Padrões Gerais</h2>
<p>Especifique padrões para a aplicação como um todo</p>
</div>

<div>
<h3>Complexidade de Caracteres</h3>
<p>Quantos mais caracteres sua senha tiver, mais segura será. Escolha a que satisfaz suas necessidades de segurança:</p>
</div>
<div class="service-window">
<div class="option">
<label>
<input type="radio" name="caractere" value="base10"><span></span> Caracteres do sistema decimal
</label>
<p>10 caracteres => <br> 0 1 2 3 4 5 6 7 8 9</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="base16"><span></span> Caracteres do sistema hexadecimal
</label>
<p>16 caracteres => <br> 0 1 2 3 4 5 6 7 8 9 A B C D E F</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="base62"><span></span> Caracteres decimais e letras maiusculas e minusculas
</label>
<p>62 caracteres => <br> 0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="base85P" checked><span></span> Caracteres do idioma do computador (Padrão)
</label>
<p>85 caracteres => <br> 0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z ! # $ % & ( ) * + - ; < = > ? @ ^ _ ` { | } ~</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="base85F"><span></span> Caracteres Fixos (0-9/A-z/a-z/!-~)
</label>
<p>85 caracteres => <br> 0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z ! # $ % & ( ) * + - ; < = > ? @ ^ _ ` { | } ~</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="baseASCII"><span></span> Caracteres ASCII
</label>
<p>128 caracteres => 128</p>
</div>

<div class="option">
<label>
<input type="radio" name="caractere" value="baseUTF8"><span></span> Caracteres Unicode (UTF-8)
</label>
<p>65 536 caracteres => WOW!</p>
</div>
</div>

<div>
<h2>Título2 da Dúvida</h2>
<p>Texto livremente formatado usando HTML.</p>
<h3>Tamanho da Senha</h3>
<p>Quão maior for a senha gerada, mais segura será. Escolha a que satisfaz suas necessidades de segurança:</p>
</div>
<div class="settings-window">
<p>QR CODE</p>
<div class="service-window">
<div>
<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>
</div>
</div>
</div>
</div>


</section>

</div>
Expand Down
14 changes: 11 additions & 3 deletions scripts/ui-effects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function closePopup() {
document.getElementById('mainPage').style.display = 'block';
document.getElementById('popup').style.display = 'none';
document.getElementById('settings-popup').style.display = 'none';
document.getElementById('service-popup').style.display = 'none';
document.body.classList.remove('modal-open');

// Adiciona uma entrada ao histórico de navegação com hash
Expand Down Expand Up @@ -117,9 +118,12 @@ function showInfo(contentTemplateId, window) {
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';
} if (window === '3'){ //Menu Service
document.getElementById('service-popup-content').innerHTML = content;
document.getElementById('service-popup').style.display = 'block';
document.body.classList.add('modal-open');

} else {
document.body.classList.add('modal-open');
}

Expand Down Expand Up @@ -274,6 +278,10 @@ function check(name, value) {
document.getElementById('settings-popup-content').innerHTML = content;
document.getElementById('settings-popup').style.display = 'block';
document.body.classList.add('modal-open');
} if (window === '3'){ //Menu Service
document.getElementById('service-popup-content').innerHTML = content;
document.getElementById('service-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';
Expand Down
7 changes: 7 additions & 0 deletions styles/btn.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,13 @@ a {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

#service-btn {
cursor: pointer;
color: #fff;
background-color: #007bff;
position: absolute;
}

.ok-button {
display: flex;
justify-content: center; /* Centraliza os botões "OK" */
Expand Down
18 changes: 18 additions & 0 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,24 @@ input[type="radio"] + span + label {
overflow-x: auto;
}

#service-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #2b2b2b;
color: white;
border: 2px solid #007bff;
min-width: 60%; /* Ajustado para % da largura da janela principal */
min-height: 90%; /* Ajustado para % da altura da janela principal */
max-width: 60%; /* Ajustado para % da largura da janela principal */
max-height: 90%; /* Ajustado para % da altura da janela principal */
overflow-y: auto;
overflow-x: auto;
}

#donation-popup {
display: none;
position: fixed;
Expand Down

0 comments on commit 7cf13e4

Please sign in to comment.