Add files via upload

abhay-dev2901 · Mar 12, 2024 · 26045c6 · 26045c6
1 parent 5aa9d7e
commit 26045c6
Show file tree

Hide file tree

Showing 3 changed files with 292 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+
+</head>
+<body>
+    <div class="container">
+
+        <div class="heading">
+            Password Generator
+        </div>
+
+        <div class="Passwordbox">
+            P4$5WOrd!
+            <a href="/"><span class="material-symbols-outlined">
+                file_copy
+                </span>
+            </a>
+        </div>
+        <div class="info-box">
+            <div class="length">
+                <p>Character length</p>
+                <span class="CharLen"></span>
+            </div>
+            <input type="range" name="range" maxlength="50" minlength="8" value="0" id="range">
+
+            <div class="list">
+                <ul>
+
+                    <li><label for="checkbox1" class="custom-checkbox"></label><input type="checkbox" name="checkbox1" id="my1checkbox">Include Uppercase Letters</li>
+                    <li><label for="checkbox2" class="custom-checkbox"></label><input type="checkbox" name="checkbox2" id="my2checkbox">Include Lowercase Letters</li>
+                    <li><label for="checkbox3" class="custom-checkbox"></label><input type="checkbox" name="checkbox3" id="my3checkbox">Include Numbers</li>
+                    <li><label for="checkbox4" class="custom-checkbox"></label><input type="checkbox" name="checkbox4" id="my4checkbox">Include Symbols</li>
+
+                </ul>
+            </div>
+
+
+            <div class="strength-box">
+                STRENGTH
+                <div class="bar" id="one"></div>
+                <div class="bar" id="two"></div>
+                <div class="bar" id="three"></div>
+                <div class="bar" id="four"></div>
+
+            </div>
+
+            <a href="/">
+                <div class="generate">
+                    GENERATE
+                    <i class="material-symbols-outlined">arrow_forward</i>
+                </div>
+            </a>
+
+
+        </div>
+    </div>
+    <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,6 @@
+const rangeInput = document.getElementById("range")
+const rangeInputValue = document.querySelector(".CharLen")
+
+rangeInput.addEventListener("input",function(){
+    rangeInputValue.textContent = this.value;
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,216 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0);
+    color: white;
+    font-family:  "Roboto Mono", monospace;
+}
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    /* height: 100%;
+} */
+
+.container{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    margin: 200px;
+    margin: 0;
+    padding: 0;
+
+}
+
+.Passwordbox{
+    /* border: 2px solid white; */
+    width: 30em;
+    height: 4em;
+    background-color: rgba(128, 128, 128, 0.331);
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+}
+
+
+.info-box{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 30em;
+    height: 30em;
+    margin-top: 30px;
+    background-color: rgba(128, 128, 128, 0.331);
+}
+
+.list{
+    margin-left: -85px;
+    background-color: rgba(128, 128, 128, 0.331);
+}
+
+li{
+    padding: 5px;
+    /* margin-left: -50px; */
+    background-color: rgba(128, 128, 128, 0.331);
+
+}
+
+input[type="checkbox"]{
+    display: none;
+}
+
+.custom-checkbox{
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    border: 1px solid white;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    margin-right: 10px;
+    position: relative;
+    cursor: pointer;
+    background-color: rgba(128, 128, 128, 0.102);
+}
+
+.custom-checkbox:checked::before{
+    content: "\2713";
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 12px;
+
+}
+
+.custom-checkbox:checked{
+    background-color: greenyellow;
+    color: black;
+}
+
+input[type="range"]{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 80%;
+    height: 10px;
+    background-color: rgba(26, 22, 22, 0.632);;
+    border-radius: 5px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border-radius: 50%;
+    border: 1px solid;
+}
+
+
+
+input[type="range"]::-webkit-slider-thumb:active{
+    background-color: black;
+    border: 1px solid yellowgreen;
+    transform: scale(1.25);
+}
+
+.generate{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 300px;
+    height: 50px;
+    background-color: greenyellow;
+    color: rgba(0, 0, 0, 0.663);
+
+}
+
+.generate i{
+    background-color: greenyellow;
+    color: rgba(0, 0, 0, 0.663);
+}
+
+.generate i:hover{
+    background-color: rgba(0, 0, 0, 0.663);
+    color: greenyellow;
+    background-color: rgba(26, 22, 22, 0.632);
+}
+
+
+a{
+    text-decoration: none;
+}
+
+
+.generate:hover{
+    border: greenyellow 1px solid;
+    background-color: rgba(128, 128, 128, 0.331);
+    color: greenyellow;
+}
+
+
+.heading p{
+    color: rgb(161, 161, 161);
+    margin-top: 100px;
+    font-weight: 1000;
+}
+
+ul{
+    list-style-type: none;
+}
+
+.info-box .length > p{
+    margin-left: -185px;
+    font-weight: 400;
+    background-color: rgba(128, 128, 128, 0.331);
+}
+
+
+.strength-box{
+    display: flex;
+    align-items: center;
+    background-color: rgba(26, 22, 22, 0.632);
+    width: 350px;
+    height: 50px;
+    padding: 10px;
+    color: grey;
+
+}
+
+.strength-box div {
+    border: 1px solid white;
+    width: 10px;
+    height: 25px;
+    margin: 3px;
+    background-color: rgba(49, 41, 41, 0.748);
+}
+
+#one{
+    margin-left: 200px;
+}
+
+material-symbols-outlined{
+    color: yellowgreen;
+}
+
+.Charlen{
+    font-size: 30px;
+    color: yellowgreen;
+}
+
+.length{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+
+