Merge pull request #27 from sutanusaha1920/main

Updated Password Generator
Sbiswas001 · Jun 17, 2024 · e000769 · e000769
2 parents ed3797a + 0a1b5cb
commit e000769
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 0 deletions.
diff --git a/root/assets/css/password-generator.css b/root/assets/css/password-generator.css
@@ -0,0 +1,103 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+    box-sizing: border-box;
+}
+body{
+    background: #002339;
+    color: #fff;
+}
+#container{
+    margin: 9%;
+    width: 90%;
+    max-width: 700px;
+}
+.display{
+    width: 100%;
+    margin-top: 50px;
+    margin-bottom: 30px;
+    background: #fff;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26px 20px;
+    border-radius: 5px;
+}
+#container h1{
+    font-weight: 500;
+    font-size: 45px;
+}
+#container h1 span{
+    color: #019f55;
+    border-bottom: 4px solid #019f55;
+}
+.display input{
+    border: 0;
+    outline: 0;
+    font-size: 24px;
+}
+.display i{
+    width: 30px;
+    font-size: 27px;
+    cursor: pointer;
+}
+#container button i{
+    width: 28px;
+    margin-right: 10px;
+}
+#container button{
+    border: 0;
+    outline: 0;
+    background: #019f55;
+    color: #fff;
+    font-size: 22px;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    padding: 16px 26px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+#container button:hover{
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+.fa-copy:hover {
+    color: #45b39d;
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+#message-box {
+    visibility: hidden;
+    min-width: 100px;
+    background-color: #63E6BE;
+    color: #fff;
+    text-align: center;
+    border-radius: 5px;
+    padding: 5px;
+    position: absolute;
+    top: calc(75% + 0px);
+    left: 95%;
+    transform: translateX(-50%);
+    font-size: 14px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transition: visibility 0s, opacity 0.5s ease-in-out;
+    opacity: 0;
+}
+
+#message-box.show {
+    visibility: visible;
+    opacity: 1;
+}
+#container img{
+    height: 100px;
+    width: fit-content;
+}
+footer{
+    text-align: center;
+    padding: 3px;
+    color: #c5b9b9;
+}
diff --git a/root/assets/images/reset-password.png b/root/assets/images/reset-password.png
diff --git a/root/assets/scripts/password-generator.js b/root/assets/scripts/password-generator.js
@@ -0,0 +1,31 @@
+const passwordBox=document.getElementById("password");
+const length = 12;
+const upperCase="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const lowerCase="abcdefghijklmnopqrstuvwxyz";
+const number="0123456789"
+const symbol="@#$%^&*()_+|}{[]></-="
+const allChars= upperCase + lowerCase + number + symbol
+function createPassword(){
+    let password="";
+    password +=upperCase[Math.floor(Math.random() * upperCase.length)];
+    password +=lowerCase[Math.floor(Math.random() * lowerCase.length)];
+    password +=number[Math.floor(Math.random() * number.length)];
+    password +=symbol[Math.floor(Math.random() * symbol.length)];
+
+    while(length > password.length){
+        password +=allChars[Math.floor(Math.random() * allChars.length)];
+    }
+    passwordBox.value = password;
+}
+function copyPassword(){
+    passwordBox.select();
+    document.execCommand("copy");
+    showMessage();
+}
+function showMessage() {
+    var messageBox = document.getElementById("message-box");
+    messageBox.classList.add("show");
+    setTimeout(function () {
+        messageBox.classList.remove("show");
+    }, 2000);
+}
diff --git a/root/pages/password-generator.html b/root/pages/password-generator.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="/root/assets/css/password-generator.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="icon" href="/root/assets/images/reset-password.png" type="image/x-icon"/>
+</head>
+<body>
+    <div id="container">
+        <img src="/root/assets/images/reset-password.png">
+        <h1>Genarate a <br><span>Random Password</span></h1>
+        <div class="display" style="position: relative;">
+            <input type="text" id="password" placeholder="Password" readonly>
+            <i class="fa-solid fa-copy" style="color: #63E6BE;" onclick="copyPassword()"></i>
+            <div id="message-box">Copied!</div>
+        </div>
+        <button onclick="createPassword()"><i class="fa-solid fa-bolt" style="color: #fff;"></i>Generate Password</button>
+    </div>
+    <footer>
+        <hr style="color:gray;background-color:gray">
+        <p>Copyright (c) 2024 Sutanu Saha  -- All Rights Reserved</p>
+    </footer>
+    <script src="/root/assets/scripts/password-generator.js"></script>
+</body>
+</html>