copie coller

Author: Vital-Vuillaume

copier-active.png

@@ -13,15 +13,24 @@
     <div class="bg bloc">
       <div class="double">
         <p class="bg">Write the key you want...</p>
-        <textarea class="bg input hash" placeholder="kee"></textarea>
+        <textarea class="bg input hash" placeholder="key"></textarea>
+        <div class="bg imgBloc">
+          <div class="img a"></div>
+        </div>
       </div>
       <div class="double">
         <p class="bg">Write the message you want to encrypt...</p>
         <textarea class="bg input txt" placeholder="msg"></textarea>
+        <div class="bg imgBloc">
+          <div class="img b"></div>
+        </div>
       </div>
       <div class="double">
         <p class="bg">Write the message you want to decipher...</p>
         <textarea class="bg input txtHash" placeholder="msg-hash"></textarea>
+        <div class="bg imgBloc">
+          <div class="img c"></div>
+        </div>
       </div>
 
       <div class="double">

copier.png

@@ -20,6 +20,7 @@ body {
     background-repeat: no-repeat;
     background-color: black;
     font-size: 1.2em;
+    backdrop-filter: brightness(0.7);
 
 }
 
@@ -36,7 +37,7 @@ body {
 
     background-color: rgba(255, 255, 255, 0.25);
     backdrop-filter: blur(15px);
-    max-width: max-content;
+    -webkit-backdrop-filter: blur(15px);
     padding: 10px;
     border-radius: 10px;
     color: white;
@@ -46,19 +47,30 @@ body {
 .double {
 
     display: flex;
-    justify-content:space-between;
+    justify-content: space-between;
     gap: 30px;
     margin: 20px;
     align-items: center;
 
 }
 
+p {
+
+    width: 250px;
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
 .input {
 
     resize: none;
     border: none;
     height: 70px;
     transition: 1.5s;
+    font-size: 1.000009em;
 
 }
 
@@ -82,6 +94,25 @@ body {
 
 }
 
+.img {
+
+    background-position: center;
+    background-size: cover;
+    background-image: url(copier.png);
+    transition: 0.7s;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    transition: 1.5s;
+
+}
+
+.img.active {
+
+    background-image: url(copier-active.png);
+
+}
+
 .footer {
 
     text-decoration: none;
@@ -94,7 +125,7 @@ body {
     .bloc {
 
         position: relative;
-        top: 485px;
+        top: 605px;
 
     }
 
@@ -110,6 +141,7 @@ body {
         margin: 40px;
         margin-left: 0px;
         margin-right: 0px;
+        gap: 15px;
 
     }
 
@@ -126,6 +158,12 @@ body {
 
     }
 
+    p {
+
+        width: 265px;
+
+    }
+
     .input {
 
         height: 150px;

index.html

@@ -8,7 +8,11 @@ const hash = document.querySelector(".hash");
 const txt = document.querySelector(".txt");
 const txtHash = document.querySelector(".txtHash");
 
-let hashValue
+const copieHash = document.querySelector(".a");
+const copieTxt = document.querySelector(".b");
+const copieTxtHash = document.querySelector(".c");
+
+let hashValue;
 
 hash.addEventListener("input", function() {
   hashValue = hash.value;
@@ -36,4 +40,26 @@ txtHash.addEventListener("input", function() {
     let decrypted = atob(txtHash.value);
     txt.value = encryptDecrypt(decrypted, hashValue);
   } catch {}
-});
+});
+
+function copyToClipboard(element, text) {
+  element.classList.add("active");
+
+  navigator.clipboard.writeText(text || '');
+
+  setTimeout(function() {
+    element.classList.remove("active");
+  }, 2500);
+}
+
+copieHash.onclick = function() {
+  copyToClipboard(copieHash, hashValue);
+}
+
+copieTxt.onclick = function() {
+  copyToClipboard(copieTxt, txt.value);
+}
+
+copieTxtHash.onclick = function() {
+  copyToClipboard(copieTxtHash, txtHash.value);
+}