<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Generate Password</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .container { margin: 30px; max-width: 600px; } .form-container { background-color: #F8F8F8; border: 1px #F0F0F0 solid; padding: 10px; } </style> </head> <body> <div class="container"> <h1> <a href="https://www.privacytools.io"> <img src="img/layout/logo.png" alt="privacytools.io" class="img-responsive"> </a> </h1> <h1>Secure Password Generator</h1> <div class="form-container clearfix "> <div class="form-group"> <label>Secure Password:</label> <div class="input-group"> <input type="text" class="form-control" id="password-input" readonly> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-refresh"></span> Generate Another</button> </span> </div> </div> <div class="form-group"> <label>Password Length:</label> <select class="form-control"> <option value="">4</option> </select> </div> <div class="form-group collapse" id="advancedOptions"> <label> <input type="checkbox" checked> Upper-case </label> <label> <input type="checkbox" checked> Lower-case </label> <label> <input type="checkbox" checked> Digits </label> <label> <input type="checkbox"> Special </label> </div> <a class="btn btn-default pull-right" data-toggle="collapse" href="#advancedOptions"> <span class="glyphicon glyphicon-menu-hamburger"></span> Advanced Options </a> </div> </div> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function() { $("#password-input").val("Password123"); }); </script> </body> </html>