├── .gitignore
├── css
    └── style.css
├── index.html
└── js
    ├── buttons-functions.js
    ├── buttons.js
    ├── forms.js
    ├── matrix-background.js
    └── validation-and-errors.js


/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sofifregona/Criptex-Oracle-ONE/1874824385b4377fe61231c47e701c3494aa0571/.gitignore


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     box-sizing: border-box;
  4 | }
  5 | 
  6 | canvas {
  7 |     height: 100%;
  8 |     width: 100%;
  9 |     position: absolute;
 10 |     top: 0;
 11 |     left: 0;
 12 |     z-index: -1
 13 | }
 14 | 
 15 | body {
 16 |     background-color: rgba(0,0,0,1);
 17 |     margin: 0;
 18 |     font-family: 'PT Serif', serif;
 19 |     display: block;
 20 |     width: 100%;
 21 |     height: 100%;
 22 | }
 23 | 
 24 | .main {
 25 |     height: auto;
 26 |     margin: auto;
 27 |     display: flex;
 28 |     align-items: center;
 29 |     flex-direction: column;
 30 | }
 31 | 
 32 | .title {
 33 |     display: flex;
 34 |     margin-bottom: 10px;
 35 |     width: 100%;
 36 |     justify-content: center;
 37 |     font-size: 40px;
 38 |     color: white;
 39 |     background-color: rgba(0, 0, 0, 0.75);
 40 | }
 41 | 
 42 | @media screen and (min-width: 1080px) {
 43 |     .box {
 44 |         padding: 15px;
 45 |         margin: 15px 10px 10px 10px;
 46 |         background-color: rgba(0, 0, 0, 0.75);
 47 |         box-shadow: 0.5px 0.5px 10px 0px darkgreen;
 48 |         border-radius: 2em;
 49 |         width: 50%;
 50 |         height: auto;
 51 |         color: lightgray;
 52 |     }
 53 | }
 54 | 
 55 | @media screen and (max-width: 1080px) {
 56 |     .box {
 57 |         padding: 15px;
 58 |         margin: 15px 10px 10px 10px;
 59 |         background-color: rgba(0, 0, 0, 0.75);
 60 |         box-shadow: 0.5px 0.5px 10px 0px darkgreen;
 61 |         border-radius: 2em;
 62 |         width: 80%;
 63 |         height: auto;
 64 |         color: lightgray;
 65 |     }
 66 | }
 67 | 
 68 | 
 69 | .buttons {
 70 |     text-align: center;
 71 |     padding: 10px;
 72 |     margin: auto;
 73 |     opacity: 1;
 74 | }
 75 | 
 76 | .btn {
 77 |     border: solid;
 78 |     border-bottom-style: groove;
 79 |     color: white;
 80 |     background-color: #4e4e4e;
 81 |     font-family: 'Lato', sans-serif;
 82 |     padding: 10px;
 83 |     border-radius: 1.25em;
 84 |     transition-duration: 0.08s;
 85 |     margin-left: 1px;
 86 |     margin-right: 1px;
 87 | }
 88 | 
 89 | .btn:active {
 90 |     background-color: #4e4e4e;
 91 |     transform: translateY(4px);
 92 | }
 93 | 
 94 | .text-input {
 95 |     border-radius: 1em;
 96 |     border: 0px rgba(0, 0, 0, 0.2);
 97 |     display: flex;
 98 |     padding: 0.5em;
 99 |     width: 100%;
100 |     height: 50px;
101 |     outline-color: #747474;
102 | }
103 | 
104 | h2 {
105 |     display: flex;
106 |     font-size: 20px;
107 |     font-family: 'PT Serif', serif;
108 |     justify-content: center;
109 |     margin-top: 0px;
110 |     margin-bottom: 10px;
111 |     color: white;
112 | }
113 | 
114 | #sub-msg {
115 |     display: flex;
116 |     margin-bottom: 5px;
117 |     margin-left: 3px;
118 |     font-size: 14px;
119 |     text-align: justify;
120 | }
121 | 
122 | #error {
123 |     display: flex;
124 |     margin-top: 5px;
125 |     margin-left: 3px;
126 |     color: red;
127 |     justify-content: right;
128 |     font-size: 14px;
129 | }
130 | 
131 | .btn:hover {
132 |     box-shadow: 0px 2px 10px 0px darkgreen;
133 | }
134 | 
135 | footer {
136 |     text-align: center;
137 |     margin-top: 8vh;
138 |     margin-bottom: 10px;
139 |     width: 100%;
140 |     color: white;
141 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Criptex</title>
 9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 |     <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
12 |     <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
13 |     <link rel="stylesheet" href="css/style.css">
14 | </head>
15 | 
16 | <body>
17 |     <canvas id="canvas">Canvas is not supported in your browser.</canvas>
18 |     <canvas id="canvas2">Canvas is not supported in your browser.</canvas>
19 |     <script src="js/matrix-background.js"></script>
20 |     <h1 class="title" id="main-title">Código Secreto</h1>
21 | 
22 |     <main class="main">
23 |         <div class="form box">
24 |             <h2 id="first-msg">Escriba su mensaje:</h2>
25 |             <form action="">
26 |                 <label for="input-text" id="sub-msg">El mensaje se mostrará en minúsculas. No se pueden ingresar números
27 |                     ni caracteres especiales.</label>
28 |                 <input class="text-input" type="text" name="input-text" id="input" placeholder="Ingrese el texto aquí.">
29 |                 <span id="error" class="invisible"></span>
30 |                 <div class=buttons>
31 |                     <input class="btn" type="submit" value="Encriptar" id="btn-encrypt">
32 |                     <input class="btn" type="submit" value="Desencriptar" id="btn-decrypt">
33 |                 </div>
34 |             </form>
35 |         </div>
36 | 
37 |         <div class="msg box">
38 |             <h2 id="second-msg">Mensaje encriptado:</h2>
39 |             <input class="text-input" type="text" id="output" readonly="readonly"></input>
40 |             <div class=buttons>
41 |                 <input class="btn" type="submit" value="Copiar" id="btn-copy">
42 |             </div>
43 |         </div>
44 | 
45 |     </main>
46 |     <script src="js/forms.js"></script>
47 |     <script src="js/validation-and-errors.js"></script>
48 |     <script src="js/buttons-functions.js"></script>
49 |     <script src="js/buttons.js"></script>
50 | 
51 |     <footer>
52 |         <p>Copyright © 2022 María Sofía Fregona, v 1.0.0<br>Background by <a href="https://codepen.io/riazxrazor/pen/Gjomdp">Riaz Laskar</a></p>
53 |     </footer>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/js/buttons-functions.js:
--------------------------------------------------------------------------------
 1 | function encrypt(input) {
 2 |     array = input.toLowerCase().split('');
 3 |     for (var i = 0; i < array.length; i++) {
 4 |         if (array[i] == "a") {
 5 |             array.splice(i, 1, ("ai"));
 6 |         } else if (array[i] == "e") {
 7 |             array.splice(i, 1, ("enter"));
 8 |         } else if (array[i] == "i") {
 9 |             array.splice(i, 1, ("imes"));
10 |         } else if (array[i] == "o") {
11 |             array.splice(i, 1, ("ober"));
12 |         } else if (array[i] == "u") {
13 |             array.splice(i, 1, ("ufat"));
14 |         }
15 |     }
16 |     return array.join("");
17 | }
18 | 
19 | function decrypt(input){
20 |     array = input.toLowerCase().split('');
21 |     for(var i = 0; i < array.length; i++){
22 |         if((array[i]+array[i+1]) == "ai"){
23 |             array.splice(i, 2, "a");
24 |         } else if ((array[i]+array[i+1]+array[i+2]+array[i+3]+array[i+4]) == "enter"){
25 |             array.splice(i, 5, "e");
26 |         } else if ((array[i]+array[i+1]+array[i+2]+array[i+3]) == "imes"){
27 |             array.splice(i, 4, "i");
28 |         } else if ((array[i]+array[i+1]+array[i+2]+array[i+3]) == "ober"){
29 |             array.splice(i, 4, "o");
30 |         } else if ((array[i]+array[i+1]+array[i+2]+array[i+3]) == "ufat"){
31 |             array.splice(i, 4, "u");
32 |         }
33 |     }   
34 |     return array.join("");
35 | }
36 | 
37 | 
38 | function copy(){
39 |     var copyText = document.querySelector("#output");
40 |     copyText.select();
41 |     document.execCommand("copy");
42 | }


--------------------------------------------------------------------------------
/js/buttons.js:
--------------------------------------------------------------------------------
 1 | //Link buttons
 2 | var buttonEncrypt = document.querySelector("#btn-encrypt");
 3 | var buttonDecrypt = document.querySelector("#btn-decrypt");
 4 | var buttonCopy = document.querySelector("#btn-copy");
 5 | 
 6 | //Encrypte button
 7 | buttonEncrypt.addEventListener("click", function (event) {
 8 |     event.preventDefault();
 9 |     var input = captureInput();
10 | 
11 |     //Validation and error message
12 |     var error = validateString(input);
13 |     if (error) {
14 |         errorMsg();
15 |         return;
16 |     }
17 |     var errorReset = document.querySelector("#error");
18 |     errorReset.innerHTML = "";
19 | 
20 |     //Calling encrypte function
21 |     var encryptedString = encrypt(input);
22 | 
23 |     //Output encrypted word
24 |     output(encryptedString);
25 | 
26 | });
27 | 
28 | //Decrypte button
29 | buttonDecrypt.addEventListener("click", function (event) {
30 |     event.preventDefault();
31 |     var input = captureInput();
32 | 
33 |     //Validation and error message
34 |     var error = validateString(input);
35 |     if (error) {
36 |         errorMsg();
37 |         return;
38 |     }
39 |     var errorReset = document.querySelector("#error");
40 |     errorReset.innerHTML = "";
41 | 
42 |     //Calling decrypte function
43 |     var decryptedString = decrypt(input);
44 | 
45 |     //Output decrypted word
46 |     output(decryptedString);
47 | 
48 | });
49 | 
50 | //Copy button
51 | buttonCopy.addEventListener("click", function (event) {
52 |     event.preventDefault();
53 | 
54 |     //Calling copy function
55 |     copy();
56 | });


--------------------------------------------------------------------------------
/js/forms.js:
--------------------------------------------------------------------------------
 1 | //Capture input
 2 | function captureInput() {
 3 |     var input = document.querySelector("#input");
 4 |     return input.value;
 5 | }
 6 | 
 7 | //Show output
 8 | function output(encryptedString){
 9 |     document.querySelector("#output").value=encryptedString;
10 | }


--------------------------------------------------------------------------------
/js/matrix-background.js:
--------------------------------------------------------------------------------
 1 | var canvas = document.getElementById('canvas'),
 2 |     ctx = canvas.getContext('2d'),
 3 |     canvas2 = document.getElementById('canvas2'),
 4 |     ctx2 = canvas2.getContext('2d'),
 5 |     // full screen dimensions
 6 |     cw = screen.width,
 7 |     ch = screen.height,
 8 |     charArr = ['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'],
 9 |     maxCharCount = 100,
10 |     fallingCharArr = [],
11 |     fontSize = 10,
12 |     maxColums = cw / (fontSize);
13 | canvas.width = canvas2.width = cw;
14 | canvas.height = canvas2.height = ch;
15 | 
16 | 
17 | function randomInt(min, max) {
18 |     return Math.floor(Math.random() * (max - min) + min);
19 | }
20 | 
21 | function randomFloat(min, max) {
22 |     return Math.random() * (max - min) + min;
23 | }
24 | 
25 | function Point(x, y) {
26 |     this.x = x;
27 |     this.y = y;
28 | }
29 | 
30 | Point.prototype.draw = function (ctx) {
31 | 
32 |     this.value = charArr[randomInt(0, charArr.length - 1)].toUpperCase();
33 |     this.speed = randomFloat(0.1, 4);
34 | 
35 | 
36 |     ctx2.fillStyle = "rgba(255,255,255,0.8)"; 
37 |     ctx2.font = fontSize + "px san-serif";
38 |     ctx2.fillText(this.value, this.x, this.y);
39 | 
40 |     ctx.fillStyle = "darkgreen";
41 |     ctx.font = fontSize + "px san-serif";
42 |     ctx.fillText(this.value, this.x, this.y);
43 | 
44 | 
45 | 
46 |     this.y += this.speed;
47 |     if (this.y > ch) {
48 |         this.y = randomFloat(-100, 0);
49 |         this.speed = randomFloat(0.1, 4);
50 |     }
51 | }
52 | 
53 | for (var i = 0; i < maxColums; i++) {
54 |     fallingCharArr.push(new Point(i * fontSize, randomFloat(-1000, 0)));
55 | }
56 | 
57 | 
58 | var update = function () {
59 | 
60 |     ctx.fillStyle = "rgba(0,0,0,0.05)";
61 |     ctx.fillRect(0, 0, cw, ch);
62 | 
63 |     ctx2.clearRect(0, 0, cw, ch);
64 | 
65 |     var i = fallingCharArr.length;
66 | 
67 |     while (i--) {
68 |         fallingCharArr[i].draw(ctx);
69 |         var v = fallingCharArr[i];
70 |     }
71 | 
72 |     requestAnimationFrame(update);
73 | }
74 | 
75 | update();


--------------------------------------------------------------------------------
/js/validation-and-errors.js:
--------------------------------------------------------------------------------
 1 | //Input validation
 2 | function validateString(input){
 3 |     array = input.split('');
 4 |     var error = false;
 5 |     for(var i = 0; i < array.length; i++){
 6 |         if (array[i].codePointAt(0) != 32 && (array[i].codePointAt(0) < 97 || array[i].codePointAt(0) > 122) && (array[i].codePointAt(0) < 65 || array[i].codePointAt(0) > 90)){
 7 |             error = true;
 8 |             break;
 9 |         }
10 |     }
11 |     return error;
12 | }
13 | 
14 | //Error message
15 | function errorMsg() {
16 |     var error = document.querySelector("#error");
17 |     error.textContent = "Error. Ha ingresado un carácter inválido.";
18 | }


--------------------------------------------------------------------------------