diff --git a/Password-Generator-Extension.zip b/Password-Generator-Extension.zip deleted file mode 100644 index 586b833..0000000 Binary files a/Password-Generator-Extension.zip and /dev/null differ diff --git a/imgs/copy-64.png b/imgs/copy-64.png new file mode 100644 index 0000000..82b1791 Binary files /dev/null and b/imgs/copy-64.png differ diff --git a/imgs/icon-128.png b/imgs/icon-128.png index a1e5e11..4c60980 100644 Binary files a/imgs/icon-128.png and b/imgs/icon-128.png differ diff --git a/imgs/icon-64.png b/imgs/icon-64.png index 87c9dfc..71b4402 100644 Binary files a/imgs/icon-64.png and b/imgs/icon-64.png differ diff --git a/popup.html b/popup.html index e84cfe3..58ff881 100644 --- a/popup.html +++ b/popup.html @@ -4,44 +4,79 @@ - Password Generator + KeyWeaver -
-
-
Password Generator
- -
+
+
+
+
+
+
+
+
+
KeyWeaver
+
+ +
+
+
+ + Eye +
+ +
+ + +
+ +
+ +
+
+ + -
- - Eye -
- -
-

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

-


-
+
+
+ + + +
+
+ +
+
+ + + + + +
+ + copyimg +
+ +
diff --git a/scripts/script.js b/scripts/script.js index 941474e..7ce4e21 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,12 +1,10 @@ -/* global chrome */ - function convertAscii(array) { for (let i = 0; i < array.length; i++) { let value = array[i] / 2; if (value < 32) { value += 32; } - if (value === 127) { + if (value >= 127) { value -= 1; } array[i] = value; @@ -36,21 +34,27 @@ async function encrypt(plaintext, keyword) { hash: "SHA-256" }, hashed, - 128 + 128 ); - const hashArray = convertAscii(Array.from(new Uint8Array(key))); console.log(hashArray); + console.log(hashArray.length); return String.fromCharCode(...hashArray); } - async function generatePassword() { - document.getElementById("copy-confirm").innerText = ""; const plaintext = document.getElementById("plaintext").value; const keyword = document.getElementById("keyword").value; - document.getElementById("output").value = await encrypt(plaintext, keyword); + const menu_value = parseInt(document.getElementById("menu").value); + + if (plaintext.length > 0 && keyword.length > 0) { + const encrypted = await encrypt(plaintext, keyword); + document.getElementById("output").value = encrypted.slice(0, menu_value); + } else { + document.getElementById("output").value = ""; + } } + @@ -82,14 +86,18 @@ function copyToClipboard() { .writeText(text) .then(() => { console.log("Text copied to clipboard:", text); - document.getElementById("copy-confirm").innerText = - "Copied to Clipboard!"; + + + /*document.getElementById("copy-confirm").innerText = + "Copied to Clipboard!";*/ }) .catch((error) => { console.error("Failed to copy text to clipboard:", error); }); } + + document.getElementById("eyeicon").addEventListener("click", function () { const plaintext = document.getElementById("plaintext"); const eyeicon = document.getElementById("eyeicon"); @@ -99,8 +107,15 @@ document.getElementById("eyeicon").addEventListener("click", function () { }); // Event listeners -document.getElementById("submit").addEventListener("click", generatePassword); -document.getElementById("copy").addEventListener("click", copyToClipboard); +document.getElementById("copyimg").addEventListener("click", copyToClipboard); document.getElementById("keyword").addEventListener("click", autoFill); +document.getElementById("keyword").addEventListener("input", generatePassword); +document.getElementById("plaintext").addEventListener("input", generatePassword); +document.getElementById("menu").addEventListener("change", generatePassword); + + +document.getElementById("hburger-box").addEventListener("click", (e) => { + e.currentTarget.classList.toggle("change"); +}); -autoFill(); \ No newline at end of file +autoFill(); diff --git a/styles/style.css b/styles/style.css index 59e4fd2..a9d4cd9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,186 +1,305 @@ +:root { + --main-color: #6B13D7; +} + * { - margin: 0; - padding: 0; - list-style: none; - text-decoration: none; - box-sizing: border-box; + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0; + text-decoration: none; } body { - margin: 0; - padding: 0; - width: 315px; - height: 500px; - overflow: hidden; - box-shadow: none; - border: 1px solid #ccc; - border-radius: 8px; + height: 350px; + margin: 0; + overflow: hidden; + padding: 0; + width: 350px; } .form { - background-color: #15172b; - border-color: #dc2f55; - box-sizing: border-box; - height: 550px; - padding: 20px; - width: 320px; + background-color: #EDEDED; + border: 2px solid; + border-color: var(--main-color); + box-sizing: border-box; + height: 350px; + width: 350px; } +/*Header*/ .headerbox { - background-color: #303245; - border-radius: 12px; - height: 64px; - position: relative; - width: 100%; - display: flex; - align-items: center; + align-items: center; + background-color: white; + display: flex; + height: 64px; + position: relative; + width: 100%; } -.title { - color: #eee; - font-family: sans-serif; - font-size: 20px; - font-weight: 600; - margin-top: 5px; - padding: 10px; +.left-header { + display: flex; + margin-right: 20px; } -.input-container { - background-color: #303245; - border-radius: 12px; - height: 50px; - position: relative; - width: 100%; - display: flex; - align-items: center; +.hburger-box { + cursor: pointer; + display: inline-block; + padding-left: 20px; +} + +.bar1, .bar2, .bar3 { + background-color: var(--main-color); + height: 3px; + margin: 6px 0; + transition: 0.3s; + width: 30px; +} + +.change .bar1 { + transform: translate(0, 9px) rotate(-45deg); +} + +.change .bar2 { + opacity: 0; +} + +.change .bar3 { + transform: translate(0, -9px) rotate(45deg); } -.input-container input { - width: 100%; - padding: 4px 20px 0; - border: 0; - outline: 0; - font-size: 24px; +.title { + color: black; + font-family: sans-serif; + font-size: 24px; + margin-left: 20px; +} + +.logo { + height: auto; + margin-left: auto; + margin-right: 20px; + max-width: 50px; } -.input-container img { - padding: 10px; - width: 20px; - cursor: pointer; +/*#######Inputs#######*/ +.input-main { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; } -.ic1 { - margin-top: 40px; +.input-container { + border: 3px solid var(--main-color); + border-radius: 6px; + height: 40px; + margin-top: 20px; + position: relative; + width: 85%; } + .input-container img { + cursor: pointer; + padding: 10px; + width: 20px; + } + + .input-container input { + border: 0; + font-size: 18px; + outline: 0; + width: 100%; + } + .input { - background-color: #303245; - border-radius: 12px; - border: 0; - box-sizing: border-box; - color: #eee; - font-size: 18px; - height: 100%; - outline: 0; - padding: 4px 20px 0; - width: 100%; + border: 0; + box-sizing: border-box; + color: black; + font-size: 20px; + height: 100%; + outline: 0; + padding: 4px 5px 0; + width: 50%; } .cut { - background-color: #15172b; - border-radius: 10px; - height: 20px; - left: 20px; - position: absolute; - top: -20px; - transform: translateY(0); - transition: transform 200ms; - width: 100px; + background-color: white; + border-radius: 10px; + height: 20px; + left: 20px; + opacity: 0; + position: absolute; + top: -20px; + transform: translateY(0); + transition: transform 200ms; + width: 100px; } .cut-short { - width: 50px; + width: 50px; } .input:focus ~ .cut, .input:not(:placeholder-shown) ~ .cut { - transform: translateY(8px); + opacity: 1; + transform: translateY(8px); } .placeholder { - color: #65657b; - font-family: sans-serif; - left: 20px; - line-height: 14px; - pointer-events: none; - position: absolute; - transform-origin: 0 50%; - transition: transform 200ms, color 200ms; - top: 20px; + color: #65657b; + font-family: sans-serif; + left: 20px; + line-height: 2px; + pointer-events: none; + position: absolute; + top: 20px; + transform-origin: 0 50%; + transition: transform 200ms, color 200ms; } .input:focus ~ .placeholder, .input:not(:placeholder-shown) ~ .placeholder { - transform: translateY(-30px) translateX(10px) scale(0.75); + transform: translateY(-25px) translateX(10px) scale(0.75); } .input:not(:placeholder-shown) ~ .placeholder { - color: #808097; + color: #808097; } .input:focus ~ .placeholder { - color: #dc2f55; + color: var(--main-color); +} + + +/*####### Options #######*/ +.options-container { + display: flex; + margin-top: 20px; +} + +.menu-container { + align-items: center; + display: flex; + justify-content: center; + width: 50%; +} + +.checkbox-container { + display: grid; + gap: 20px; + grid-template-columns: 1fr; + justify-items: end; + padding-right: 20px; + width: 100%; +} + + +.menu { + border-color: var(--main-color); + cursor: pointer; + font-size: 14px; + padding-left: 5px; + width: 150px; +} + +menu:focus { + border: 2px solid var(--main-color); +} + +menu::after { + content: ''; +} + +.switch { + display: inline-block; + height: 18px; + position: relative; + width: 30px; +} + + .switch input { + height: 0; + opacity: 0; + width: 0; + } + +.switch-label { + font-family: sans-serif; + font-size: 14px; +} + +.slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; + -webkit-transition: .4s; +} + + .slider:before { + background-color: white; + bottom: 2px; + content: ""; + height: 14px; + left: 2px; + position: absolute; + transition: .4s; + width: 14px; + -webkit-transition: .4s; + } + +input:checked + .slider { + background-color: var(--main-color); } -.button { - background-color: #1c3dcf; - border: none; - border-radius: 8px; - box-sizing: border-box; - color: white; - cursor: pointer; - font-size: 18px; - height: 50px; - margin-top: 15px; - outline: 0; - text-align: center; - width: 100%; +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; } -.button:hover { - background-color: #0d1c5c; +input:checked + .slider:before { + -ms-transform: translateX(12px); + -webkit-transform: translateX(12px); + transform: translateX(12px); } .output-container { - background-color: #303245; - border-radius: 12px; - height: 50px; - position: relative; - width: 100%; - display: flex; - align-items: center; - margin-top: 15px; -} - -.output-container input { - width: 100%; - padding: 4px 20px 0; - border: 0; - outline: 0; - font-size: 24px; -} -.copy{ - font-size: 14px; - color: #dc2f55; - font-family: sans-serif; -} - -.version{ - position: fixed; - bottom: 0; - left: 0; - padding: 10px; - color: #303245; - font-size: 10px; - font-family: sans-serif; -} \ No newline at end of file + align-items: center; + background-color: white; + border-radius: 12px; + cursor: pointer; + display: flex; + height: 50px; + margin-top: 15px; + position: relative; + width: 100%; +} + + .output-container input { + border: 0; + font-size: 24px; + outline: 0; + padding: 4px 20px 0; + width: 100%; + } + +.copy { + height: auto; + margin-left: auto; + margin-right: 20px; + max-width: 30px; +} + +.version { + bottom: 0; + color: #303245; + font-family: sans-serif; + font-size: 10px; + left: 0; + padding: 10px; +}