Add containers and input and button

tajulafreen · tajulafreen · commit 9dde1662b7bf · 2024-08-30T16:04:21.000+05:30
diff --git a/Source-Code/PasswordGenerator/index.html b/Source-Code/PasswordGenerator/index.html
@@ -11,7 +11,43 @@
     <title>Password Generator</title>
 </head>
 <body>
-    
+    <div class="card">
+        <div class="container">
+            <h2>Password Generator</h2>
+            <div class="result-container">
+                <span id="result"></span>
+                <button class="btn" id="clipboard">
+                    <i class="far fa-clipboard"></i>
+                </button>
+            </div>
+            <div class="settings">
+                <div class="setting">
+                    <label>Password Length</label>
+                    <input type="number" id="length" min="4" max="20" value="20">
+                </div>
+                <div class="setting">
+                    <label>Include uppercase letters</label>
+                    <input type="checkbox" id="uppercase" checked>
+                </div>
+                <div class="setting">
+                    <label>Include lowercase letters</label>
+                    <input type="checkbox" id="lowercase" checked>
+                </div>
+                <div class="setting">
+                    <label>Include numbers</label>
+                    <input type="checkbox" id="numbers" checked>
+                </div>
+                <div class="setting">
+                    <label>Include symbols</label>
+                    <input type="checkbox" id="symbols" checked>
+                </div>
+            </div>
+        </div>
+        <button class="btn btn-large" id="generate">
+            Generate Password
+        </button>
+
+    </div>
   
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>
     <script src="script.js"></script>
