From ee43de3206e8f441f16e77546f79dc4c9a901a47 Mon Sep 17 00:00:00 2001
From: Miguel Rodriguez <imekmusic@gmail.com>
Date: Mon, 4 Mar 2024 19:15:39 +0100
Subject: [PATCH] Encriptador casi updates :)

---
 imagenes/candado.svg   |  4 ++
 imagenes/detective.svg | 91 ++++++++++++++++++++++++++++++++++++++++++
 index.html             |  6 ++-
 styles.css             | 32 +++++++++++++--
 4 files changed, 128 insertions(+), 5 deletions(-)
 create mode 100644 imagenes/candado.svg
 create mode 100644 imagenes/detective.svg

diff --git a/imagenes/candado.svg b/imagenes/candado.svg
new file mode 100644
index 0000000..71bf484
--- /dev/null
+++ b/imagenes/candado.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.584 6C15.8124 4.2341 14.0503 3 12 3C9.23858 3 7 5.23858 7 8V10.0288M12 14.5V16.5M7 10.0288C7.47142 10 8.05259 10 8.8 10H15.2C16.8802 10 17.7202 10 18.362 10.327C18.9265 10.6146 19.3854 11.0735 19.673 11.638C20 12.2798 20 13.1198 20 14.8V16.2C20 17.8802 20 18.7202 19.673 19.362C19.3854 19.9265 18.9265 20.3854 18.362 20.673C17.7202 21 16.8802 21 15.2 21H8.8C7.11984 21 6.27976 21 5.63803 20.673C5.07354 20.3854 4.6146 19.9265 4.32698 19.362C4 18.7202 4 17.8802 4 16.2V14.8C4 13.1198 4 12.2798 4.32698 11.638C4.6146 11.0735 5.07354 10.6146 5.63803 10.327C5.99429 10.1455 6.41168 10.0647 7 10.0288Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/imagenes/detective.svg b/imagenes/detective.svg
new file mode 100644
index 0000000..110e586
--- /dev/null
+++ b/imagenes/detective.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:export-ydpi="768"
+   inkscape:export-xdpi="768"
+   inkscape:export-filename="E:\S  Y  N  T  X  Y\Dokument Desain\CARLOS\Export\6 - Law.png"
+   sodipodi:docname="7 - Detective.svg"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   id="svg979"
+   version="1.1"
+   viewBox="0 0 16.933334 16.933333"
+   height="48pt"
+   width="48pt">
+  <defs
+     id="defs973" />
+  <sodipodi:namedview
+     inkscape:snap-nodes="false"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox="true"
+     inkscape:document-rotation="0"
+     inkscape:window-maximized="1"
+     inkscape:window-y="-8"
+     inkscape:window-x="-8"
+     inkscape:window-height="715"
+     inkscape:window-width="1366"
+     units="pt"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="pt"
+     inkscape:cy="23.300758"
+     inkscape:cx="7.3002642"
+     inkscape:zoom="6.0435533"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base">
+    <inkscape:grid
+       id="grid1526"
+       type="xygrid" />
+    <sodipodi:guide
+       inkscape:locked="false"
+       id="guide1528"
+       orientation="56.666615,0"
+       position="0.97013909,15.963209" />
+    <sodipodi:guide
+       inkscape:locked="false"
+       id="guide1530"
+       orientation="0,56.666667"
+       position="0.97013909,0.97016731" />
+    <sodipodi:guide
+       inkscape:locked="false"
+       id="guide1532"
+       orientation="-56.666615,0"
+       position="15.963195,0.97016731" />
+    <sodipodi:guide
+       inkscape:locked="false"
+       id="guide1534"
+       orientation="0,-56.666667"
+       position="15.963195,15.963209" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata976">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-280.06668)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1">
+    <path
+       id="path2193"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.652623;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
+       d="m 9.3586447,281.45679 c -0.099281,9e-5 -0.2001144,0.01 -0.3008185,0.03 l -0.5755059,0.0867 -0.4435795,-0.0867 h -0.00197 c -0.8047695,-0.15958 -1.6026497,0.34329 -1.8017097,1.13954 l -0.2689525,1.07836 0.381759,0.25366 h 0.00259 c 0.722428,0.46784 1.3352771,0.68167 1.9992947,0.68194 0.6647328,2.8e-4 1.4046084,-0.22158 2.3459987,-0.69852 l 0.381126,-0.20203 -0.214779,-1.09683 a 0.32634416,0.32634416 0 0 0 -0.0026,-0.0165 c -0.174365,-0.6973 -0.805947,-1.17024 -1.5009092,-1.16955 z m -3.5601084,2.91831 -0.2007577,0.80431 c -0.4745079,0.0266 -0.9247775,0.1057 -1.3460343,0.24027 -0.1979354,0.0633 -0.3537166,0.29629 -0.3537166,0.50413 v 0.0134 c 0,0.20785 0.1343135,0.48009 0.3193008,0.57424 0.2983546,0.15183 0.6347183,0.24868 0.9381452,0.31802 0.8452543,0.18847 2.0184024,0.30847 3.3096383,0.30847 1.3310493,0 2.536762,-0.12926 3.386755,-0.32759 0.306576,-0.0911 0.602968,-0.18234 0.859754,-0.30592 0.18698,-0.09 0.323124,-0.36001 0.323124,-0.56785 v -0.0153 c 0,-0.20784 -0.154607,-0.44451 -0.352442,-0.50795 -0.440835,-0.14135 -0.910865,-0.21081 -1.32309,-0.23454 l -0.151046,-0.76989 -0.213505,0.11347 a 0.32634416,0.32634416 0 0 1 -0.0051,0.002 c -0.9909832,0.50206 -1.8304048,0.76895 -2.6398078,0.76861 -0.809403,-3.7e-4 -1.564717,-0.27516 -2.3555599,-0.78773 a 0.32634416,0.32634416 0 0 1 -0.00254,-0.002 z m -0.4646111,3.14967 c 0.088751,0.799 0.3651361,1.75645 0.9011807,2.56398 0.6263771,0.9436 1.4579019,1.60414 2.2300061,1.60414 0.1930254,0 0.3899617,-0.0412 0.5863405,-0.1179 -0.9065071,-0.30289 -1.5639993,-1.15954 -1.5639993,-2.16563 0,-0.63529 0.2620374,-1.21054 0.6832139,-1.62519 -1.0679957,-0.0154 -2.0418618,-0.10841 -2.8367419,-0.2594 z m 4.4370693,0.25367 c -0.9049481,0 -1.6309194,0.72597 -1.6309194,1.63092 0,0.90494 0.7259713,1.63092 1.6309194,1.63092 0.2536515,0 0.4923515,-0.057 0.7055205,-0.15935 0.33578,-0.16115 0.60841,-0.43419 0.768616,-0.77052 0.101045,-0.21212 0.156783,-0.44914 0.156783,-0.70105 0,-0.90495 -0.725971,-1.63092 -1.6309195,-1.63092 z m -4.0533987,2.70608 -1.4263371,0.724 a 0.32634416,0.32634416 0 0 1 -0.00254,0.002 c -0.1477846,0.0739 -0.1477852,0.23968 0,0.31355 l 1.0598745,0.52962 a 0.32634416,0.32634416 0 0 1 0.05035,0.55384 l -0.6067352,0.45314 c -0.1523587,0.11433 -0.139224,0.3198 0.026131,0.41427 a 0.32634416,0.32634416 0 0 1 0.00254,0.002 l 3.2325222,1.88331 C 7.9482743,294.97322 7.7945,294.46762 7.6244781,293.93994 c -0.3424068,-1.06272 -0.689542,-2.06082 -0.7271898,-2.16882 -0.446902,-0.33424 -0.8438734,-0.78737 -1.1796916,-1.28676 z m 5.9417982,0.21032 c -0.03435,0.0503 -0.07407,0.0961 -0.112169,0.1434 l 0.585066,0.9579 0.54364,-0.2715 c 0.147785,-0.0739 0.147783,-0.23969 0,-0.31356 a 0.32634416,0.32634416 0 0 1 -0.0026,-0.002 z m -0.59845,0.59845 c -0.09234,0.063 -0.189186,0.12012 -0.290621,0.16953 l 0.568495,0.93113 0.289346,-0.16889 z m -0.926673,0.37984 -0.05225,0.0587 c -0.02031,0.0582 -0.3906891,1.1171 -0.7424862,2.20897 -0.1697568,0.52686 -0.3231401,1.03089 -0.4282829,1.41869 l 1.8896731,-1.1001 c -0.133526,-0.0715 -0.250818,-0.17711 -0.331409,-0.31674 l -0.02867,-0.0503 c -0.11577,-0.20051 -0.135555,-0.41295 -0.106434,-0.59718 0.02912,-0.18423 0.07707,-0.36036 0.291895,-0.48437 l 0.151047,-0.0873 z m -6.2834054,0.33779 c -0.7294035,0.0913 -1.3400429,0.35204 -1.8074589,0.79029 -0.6791925,0.63674 -1.0212135,1.60292 -1.07325841,2.8087 H 7.1847218 l -2.6888813,-1.56847 c -0.5522481,-0.31556 -0.6031689,-1.11928 -0.094324,-1.5009 l 0.1835502,-0.13703 -0.5882527,-0.29635 c -0.054226,-0.0271 -0.101655,-0.0601 -0.1459478,-0.0962 z m 9.3565954,0.0197 c 0.05488,0.0529 0.105484,0.11137 0.14531,0.18036 l 0.02867,0.0503 c 0.09156,0.15858 0.123281,0.33577 0.105793,0.50667 0.1867,0.0639 0.35314,0.18821 0.458238,0.37028 l 0.02867,0.0503 c 0.231537,0.40104 0.09066,0.92266 -0.310378,1.1542 l -1.448007,0.83554 c -0.401009,0.23151 -0.924602,0.0926 -1.156111,-0.30847 l -0.0026,-0.005 -1.277203,0.74504 h 6.183342 c -0.05171,-1.20579 -0.392152,-2.17196 -1.071347,-2.8087 -0.440205,-0.4127 -1.009772,-0.66607 -1.684454,-0.77053 z m -3.9801063,0.181 c -0.2444628,0.0857 -0.4988623,0.13384 -0.7622427,0.13384 -0.2504197,0 -0.4920816,-0.0445 -0.7252782,-0.12234 0.143443,0.41905 0.3113473,0.91124 0.5066753,1.51748 0.082878,0.25723 0.1620375,0.50985 0.2358112,0.7514 0.073838,-0.24154 0.1529283,-0.49417 0.2358099,-0.7514 0.1968191,-0.61087 0.3658531,-1.10849 0.5092245,-1.52895 z m 3.3708223,0.22881 c -0.02501,0.004 -0.05002,0.0111 -0.07392,0.0255 l -1.522574,0.8795 c -0.0036,0.005 -0.01928,0.0237 -0.02358,0.0511 -0.0086,0.0545 0.0011,0.12308 0.02867,0.1708 l 0.02867,0.0503 c 0.05519,0.0956 0.166953,0.12536 0.262577,0.07 l 1.448008,-0.83618 c 0.09558,-0.0551 0.127206,-0.16954 0.07201,-0.26512 l -0.02867,-0.0478 a 0.32634416,0.32634416 0 0 1 0,-0.002 c -0.04139,-0.0717 -0.116165,-0.10619 -0.191197,-0.0956 z m 0.592077,0.9273 c -0.02479,0.004 -0.04938,0.0123 -0.0733,0.0261 l -1.524487,0.87951 c -0.0047,0.006 -0.02002,0.0232 -0.02422,0.0497 -0.0086,0.0545 0.0011,0.12371 0.02867,0.17144 l 0.02867,0.0478 c 0.05519,0.0957 0.166953,0.12791 0.262579,0.0726 l 1.449919,-0.83618 c 0.09558,-0.0551 0.125296,-0.16954 0.0701,-0.26512 l -0.02868,-0.0503 c -0.0414,-0.0716 -0.114931,-0.10619 -0.189286,-0.0956 z m -1.597779,0.90564 c 0.0049,-0.006 -0.002,10e-4 -0.04843,0.028 z" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index c120dd7..5128e4b 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,10 @@
         </script>
     </head>
     <body>
-        <h1>Encriptador<br>
-            Desencriptador</h1>
+        <h1><img class="candado" src="imagenes/candado.svg">
+            <span class ="Encriptador">Encriptador</span><br>
+            <span class = "Desencriptador">Desencriptador</span>
+        </h1>
         <label for="inputTextArea"></label>
             <div class="input">
                 <textarea id="inputTextArea" rows="18" cols="40" placeholder="Ingrese texto aquí" class="campotransparente-uno"></textarea>
diff --git a/styles.css b/styles.css
index ab82cad..3ab001e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,13 +1,24 @@
 h1 {
-    font-size: 40px;
+    font-size: 32px;
     text-align: block;
     color: rgb(139, 180, 255);
     font-family: 'Montserrat', sans-serif;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 0;
+    margin-bottom: 15px;
     font-weight: bold;
 }
 
+.Desencriptador {
+    margin-left: 68px;
+}
+
+.candado {
+    width: 60px;
+    height: 60px;
+    transform: translate(0px, 35px);
+    filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+}
+
 body {
     width: 1080px;
     height: 720px;
@@ -161,6 +172,21 @@ p {
 
 @media screen and (max-width: 720px) {
     
+    .candado {
+        width: 60px;
+        height: 60px;
+        transform: translate(0px, 35px);
+        filter: invert(58%) sepia(34%) saturate(841%) hue-rotate(189deg) brightness(115%) contrast(101%);
+    }
+
+    .Encriptador {
+        margin-right: 80px;
+    }
+    
+    .Desencriptador {
+        margin-left: 40px;
+    }
+
     h1 {
         font-size: 30px;
         text-align: center;