From 7cf13e47d571d39b7599eb08042b8ac992949ff7 Mon Sep 17 00:00:00 2001
From: Miguel <miguelmcontato@gmail.com>
Date: Mon, 22 Jan 2024 01:58:41 -0300
Subject: [PATCH] ui increments

---
 index.html            | 122 ++++++++++++++++++++++++++++++++++++++----
 scripts/ui-effects.js |  14 +++--
 styles/btn.css        |   7 +++
 styles/styles.css     |  18 +++++++
 4 files changed, 149 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index aec60c0..cd638c6 100644
--- a/index.html
+++ b/index.html
@@ -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>
@@ -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>
diff --git a/scripts/ui-effects.js b/scripts/ui-effects.js
index ea1776b..17d87ca 100644
--- a/scripts/ui-effects.js
+++ b/scripts/ui-effects.js
@@ -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
@@ -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');
     }
     
@@ -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';
diff --git a/styles/btn.css b/styles/btn.css
index 3c98a9e..1bb3500 100644
--- a/styles/btn.css
+++ b/styles/btn.css
@@ -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" */
diff --git a/styles/styles.css b/styles/styles.css
index 2414a0b..c63fbd5 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -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;