add copy button for text

itsluminous · Jan 1, 2024 · 0129d4d · 0129d4d
1 parent a943b77
commit 0129d4d
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 4 deletions.
diff --git a/static/scripts.js b/static/scripts.js
@@ -53,4 +53,21 @@ function decryptText() {
     })
         .then(response => response.text())
         .then(decryptedText => document.getElementById("decryptedOutput").value = decryptedText);
+}
+
+function copyText(elementId) {
+    const element = document.getElementById(elementId);
+    const text = element.value || element.textContent;
+
+    navigator.clipboard.writeText(text)
+        .then(() => {
+            const toast = document.getElementById('toast');
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 1300);
+        })
+        .catch((err) => {
+            console.error('Unable to copy to clipboard:', err);
+        });
 }
diff --git a/static/styles.css b/static/styles.css
@@ -10,6 +10,7 @@ body {
     box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
     max-width: 600px;
     width: 90%;
+    position: relative;
 }
 
 .title {
@@ -28,7 +29,7 @@ body {
 
 .tabs {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     background-color: #fff;
     border-bottom: 1px solid #ccc;
     padding: 10px 0;
@@ -38,6 +39,7 @@ body {
 }
 
 .tabs button {
+    flex: 1;
     margin: 0;
     padding: 10px 20px;
     color: #555;
@@ -77,6 +79,11 @@ body {
 }
 
 .btn-primary {
+    flex: 1; /* Make the buttons flex to occupy equal space */
+    margin-top: 10px; /* Adjust margin for consistency */
+    width: 100%; /* Ensure full width */
+    padding: 8px;
+    box-sizing: border-box;
     background-color: #007bff;
     border-color: #007bff;
 }
@@ -86,6 +93,39 @@ body {
     border-color: #0056b3;
 }
 
+.copy-icon {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+}
+
+.toast {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999; /* Adjust as needed to ensure it's above other elements */
+    background-color: #b4e6d3 !important;
+    color: black;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.toast.show {
+    display: block;
+    animation: fadeInOut 2s forwards;
+}
+
+@keyframes fadeInOut {
+    0% { opacity: 0; }
+    10% { opacity: 1; }
+    90% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+
 textarea,
 input[type="text"] {
     margin-top: 10px;

diff --git a/templates/index.html b/templates/index.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Encrypt/Decrypt your text</title>
+    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/5003/5003773.png">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
 </head>
@@ -12,6 +13,13 @@
     <div class="container">
         <h1 class="title">Encrypt/Decrypt your text</h1>
         <h6 class="subtitle">This application uses <a href="https://cryptography.io/en/latest/fernet/" target="_blank" style="color: #007bff; text-decoration: none;">Fernet key</a> for encryption and decryption which ensures that data cannot be manipulated or read without the key</h6>
+
+        <div class="toast" id="toast">
+            <div class="toast-body">
+                Text has been copied to clipboard!
+            </div>
+        </div>     
+
         <div class="row">
             <div class="col-sm-12">
                 <div class="tabs">
@@ -27,28 +35,63 @@ <h6 class="subtitle">This application uses <a href="https://cryptography.io/en/l
                 <div id="generateKey" class="tab-content active">
                     <h2>Generate A New Encryption Key</h2>
                     <button onclick="generateKey()" class="btn btn-primary">Generate Key</button>
-                    <input type="text" id="generatedKey" class="form-control mt-3" placeholder="Generated Key" readonly>
+                    <div style="position: relative;">
+                        <input type="text" id="generatedKey" class="form-control mt-3" placeholder="Generated Key" readonly>
+                        <span class="copy-icon" onclick="copyText('generatedKey')" title="Copy this text">
+                            <svg width="24" height="24" version="1.1" fill="currentColor" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Text-files"> 
+                                <path d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228 C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999 c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64 h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002 C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228 c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999 c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699 c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946 c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999 h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"></path> 
+                                <path d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005 c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997 C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"></path> 
+                                <path d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986 c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016 C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"></path> 
+                                <path d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997 S39.16465,29.4603004,38.6031494,29.4603004z"></path> 
+                                <path d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997 S29.0059509,37.5872993,28.4444485,37.5872993z"></path> </g> </g>
+                            </svg>
+                        </span>
+                    </div>
                 </div>
 
                 <div id="encryptText" class="tab-content">
                     <h2>Encrypt Text</h2>
                     <input type="text" id="encryptionKey" class="form-control" placeholder="Enter Encryption Key">
                     <textarea id="encryptionInput" class="form-control mt-3" rows="8" placeholder="Enter text to encrypt"></textarea>
                     <button onclick="encryptText()" class="btn btn-primary mt-3">Encrypt</button>
-                    <textarea id="encryptedOutput" class="form-control mt-3" rows="8" placeholder="Encrypted Text" readonly></textarea>
+                    <div style="position: relative;">
+                        <textarea id="encryptedOutput" class="form-control mt-3" rows="8" placeholder="Encrypted Text" readonly>Your encrypted text here...</textarea>
+                        <span class="copy-icon" onclick="copyText('encryptedOutput')" title="Copy this text" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">
+                            <svg width="24" height="24" version="1.1" fill="currentColor" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Text-files"> 
+                                <path d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228 C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999 c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64 h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002 C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228 c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999 c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699 c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946 c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999 h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"></path> 
+                                <path d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005 c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997 C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"></path> 
+                                <path d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986 c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016 C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"></path> 
+                                <path d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997 S39.16465,29.4603004,38.6031494,29.4603004z"></path> 
+                                <path d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997 S29.0059509,37.5872993,28.4444485,37.5872993z"></path> </g> </g>
+                            </svg>
+                        </span>
+                    </div>
                 </div>
 
                 <div id="decryptText" class="tab-content">
                     <h2>Decrypt Text</h2>
                     <input type="text" id="decryptionKey" class="form-control" placeholder="Enter Decryption Key">
                     <textarea id="decryptionInput" class="form-control mt-3" rows="8" placeholder="Enter text to decrypt"></textarea>
                     <button onclick="decryptText()" class="btn btn-primary mt-3">Decrypt</button>
-                    <textarea id="decryptedOutput" class="form-control mt-3" rows="8" placeholder="Decrypted Text" readonly></textarea>
+                    <div style="position: relative;">
+                        <textarea id="decryptedOutput" class="form-control mt-3" rows="8" placeholder="Decrypted Text" readonly>Your decrypted text here...</textarea>
+                        <span class="copy-icon" onclick="copyText('decryptedOutput')" title="Copy this text" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">
+                            <svg width="24" height="24" version="1.1" fill="currentColor" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Text-files"> 
+                                <path d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228 C49.7777481,2.253,47.4731483,0,44.6398468,0h-34.422596C7.3839517,0,5.0793519,2.253,5.0793519,5.0228v46.8432999 c0,2.7697983,2.3045998,5.0228004,5.1378999,5.0228004h6.0367002v2.2678986C16.253952,61.8274002,18.4702511,64,21.1954517,64 h32.783699c2.7252007,0,4.9414978-2.1725998,4.9414978-4.8432007V13.9861002 C58.9206467,11.3155003,56.7043495,9.1429005,53.9791489,9.1429005z M7.1110516,51.8661003V5.0228 c0-1.6487999,1.3938999-2.9909999,3.1062002-2.9909999h34.422596c1.7123032,0,3.1062012,1.3422,3.1062012,2.9909999v46.8432999 c0,1.6487999-1.393898,2.9911003-3.1062012,2.9911003h-34.422596C8.5049515,54.8572006,7.1110516,53.5149002,7.1110516,51.8661003z M56.8888474,59.1567993c0,1.550602-1.3055,2.8115005-2.9096985,2.8115005h-32.783699 c-1.6042004,0-2.9097996-1.2608986-2.9097996-2.8115005v-2.2678986h26.3541946 c2.8333015,0,5.1379013-2.2530022,5.1379013-5.0228004V11.1275997c0.0769005,0.0186005,0.1504021,0.0469999,0.2331009,0.0469999 h3.9682999c1.6041985,0,2.9096985,1.2609005,2.9096985,2.8115005V59.1567993z"></path> 
+                                <path d="M38.6031494,13.2063999H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0158005 c0,0.5615997,0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4542999,1.0158997-1.0158997 C39.6190491,13.6606998,39.16465,13.2063999,38.6031494,13.2063999z"></path> 
+                                <path d="M38.6031494,21.3334007H16.253952c-0.5615005,0-1.0159006,0.4542999-1.0159006,1.0157986 c0,0.5615005,0.4544001,1.0159016,1.0159006,1.0159016h22.3491974c0.5615005,0,1.0158997-0.454401,1.0158997-1.0159016 C39.6190491,21.7877007,39.16465,21.3334007,38.6031494,21.3334007z"></path> 
+                                <path d="M38.6031494,29.4603004H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h22.3491974c0.5615005,0,1.0158997-0.4543991,1.0158997-1.0158997 S39.16465,29.4603004,38.6031494,29.4603004z"></path> 
+                                <path d="M28.4444485,37.5872993H16.253952c-0.5615005,0-1.0159006,0.4543991-1.0159006,1.0158997 s0.4544001,1.0158997,1.0159006,1.0158997h12.1904964c0.5615025,0,1.0158005-0.4543991,1.0158005-1.0158997 S29.0059509,37.5872993,28.4444485,37.5872993z"></path> </g> </g>
+                            </svg>
+                        </span>
+                    </div>                                    
                 </div>
             </div>
         </div>
     </div>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script src="{{ url_for('static', filename='scripts.js') }}"></script>
 </body>