<!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>