corrigido problemas de interface e UX, foi adicionado todas features realacionadas ao tema, inserido tambem todas funcionalidades basicas de uma ligacao e inserido uma tela para o usuario realizar as configuracoes do ramal e se conectar

5 months ago · bb038e3aa8
5 changed files with 313 additions and 17 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/keypad.js
+++ b/keypad.js
--- a/keypad_style.css
+++ b/keypad_style.css
@ -48,17 +48,33 @@
 }

 .themeMode {
+  width: 25px;
+  height: 25px;
  cursor: pointer;
-  width: 28px;
-  height: 28px;
-  line-height: 8px;
-  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

 .themeMode img {
-  width: 28px;
-  height: 28px;
-  text-align: center;
+  width: 25px;
+  height: 25px;
+  margin-left: 4px;
+}
+
+.configBtn {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.configBtn img {
+  width: 25px;
+  height: 25px;
+  margin-left: 4px;
 }

 .simplesipTitles {
@ -284,6 +300,11 @@
  padding: 0;
 }

+#titleConfig {
+  font-size: 16px;
+  font-weight: 501;
+}
+
 .simplesip-bn {
  padding: 10px;
  font-size: 24px;
@ -358,3 +379,86 @@
  align-items: center;
  justify-content: end;
 }
+
+#form {
+  width: 100%;
+}
+
+#btnSave,
+#btnCancel {
+  width: 65px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  padding: 4px;
+  font-size: 13px;
+}
+
+#btnCancel {
+  cursor: pointer;
+  background-color: #e2e2e2;
+}
+
+#btnCancel:hover {
+  background-color: #c0c0c0;
+}
+
+#btnSave {
+  cursor: pointer;
+  background-color: #81b38b;
+}
+
+#btnSave:hover {
+  background-color: #5fb170;
+}
+
+.divDados {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 350px;
+}
+
+.divDados input {
+  border: none;
+  margin: 3px 0;
+  height: 25px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.input-group label {
+  font-size: 14px;
+  width: 70%;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+}
+
+.input-group input {
+  color: #333;
+  width: 70%;
+  border-bottom: 2px solid #333;
+}
+
+.divBtns {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: end;
+  width: 100%;
+}
+
+.configScreen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: calc(510.17px - 36.167px);
+}
--- a/simplesipsdk.js
+++ b/simplesipsdk.js
@ -277,6 +277,10 @@ const UASimplesIP = (function () {
      ativaDebug(value);
    },

+    unregister: () => {
+      console.log(phone.status);
+    },
+
    estouRegistradonoPBX: () => {
      console.log("estouRegistradonoPBX ::: " + phone.isRegistered());
    },
--- a/vazio.html
+++ b/vazio.html
@ -3,12 +3,13 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>simplesipsdk</title>
  </head>
  <body>
    <script src="simplesipsdk.js"></script>
    <script src="keypad.js"></script>
    <link rel="stylesheet" href="keypad_style.css" />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      #painelChamadas {
        display: flex;
@ -47,7 +48,7 @@
      <button id="away">Agente ausente</button>
    </div>

-    <script>
+    <!-- <script>
      const configuracao = UASimplesIP.config;
      configuracao.PROTOCOLO = "ws";
      configuracao.SERVIDOR = "129.148.58.190";
@ -55,6 +56,6 @@
      configuracao.NOME = "MATHEO BONUCIA";
      configuracao.RAMAL = "1000";
      configuracao.SENHA = "123";
-    </script>
+    </script> -->
  </body>
 </html>