Radmon Password Generator App
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Random Password</title> | |
| </head> | |
| <body> | |
| <div class="inputBox"> | |
| <h2>Radmon Password Generator App</h2> | |
| <input type="text" name="" placeholder="Create Password" id="password" readonly=""> | |
| <div id="btn" onclick="getPassword();">Generate Password</div> | |
| </div> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| function getPassword() { | |
| var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+?><:{}[]./<>"; | |
| var passwordLength = 16; | |
| var password = ""; | |
| for (var i=0; i<passwordLength; i++){ | |
| var randomNumber = Math.floor(Math.random() * chars.length); | |
| password += chars.substring(randomNumber, randomNumber+1); | |
| } | |
| document.getElementById("password").value = password | |
| } | |
| </script> | |
| <style type="text/css"> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| font-family: consolas; | |
| user-select: none; | |
| } | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #f8f8f8; | |
| } | |
| .inputBox{ | |
| position: relative; | |
| width: 450px; | |
| } | |
| .inputBox h2{ | |
| font-size: 28px; | |
| color: #333; | |
| } | |
| .inputBox input{ | |
| position: relative; | |
| width: 100%; | |
| height: 60px; | |
| border: none; | |
| margin: 15px 0 20px; | |
| background: transparent; | |
| outline: none; | |
| padding: 0 20px; | |
| font-size: 24px; | |
| letter-spacing: 4px; | |
| box-sizing: border-box; | |
| border-radius: 8px; | |
| color: #333; | |
| box-shadow: -4px -4px 10px rgba(255, 255, 255, 1), | |
| inset 4px 4px 10px rgba(0, 0, 0, 0.05), | |
| inset -4px -4px 10px rgba(255, 255, 255, 1), 4px 4px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .inputBox input::placeholder{letter-spacing: 0px;} | |
| .inputBox #btn{ position: relative; cursor: pointer; color: #fff; background: #333; font-size: 24px; display: inline-block; padding: 10px 15px; border-radius: 8px;} | |
| .inputBox #btn:active{ | |
| background: #9c27b0; | |
| } | |
| </style> |
Comments
Post a Comment