mockup for reading app

mockup1.html

<div class="container">
  <header>
    <h1>Summer Reading Tracker</h1>
  </header>
  <div class='row'>
    <div class="col-sm-6">
      <header>
        <h3>Kid</h3>
      </header>
      <form>
        <div class="form-group">
          <label for="Name">Name</label>
          <input class='form-control' name="Name">
        </div>
        <div class="form-group">
          <label for="Age">Age</label>
          <input type='number' class='form-control' name="Age">
        </div>
        <div class="form-group">
          <input type='submit' class='form-control btn btn-primary' value='Add Kid' />
        </div>
      </form>
    </div>
    <div class="col-sm-6">
      <header>
        <h3>Books</h3>
      </header>
      <form>
        <div class="form-group">
          <label for="Title">Title</label>
          <input class='form-control' name='Title'>
        </div>
        <div class="form-group">
          <label for="Pages">Number of Pages</label>
          <input class='form-control' name='Pages'>
        </div>
        <div class="form-group">
          <input type='submit' class='form-control btn btn-primary' value='Add Book' />
        </div>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="panel panel-primary">
      <div class="panel-heading">
        John Schmidt (8)
      </div>
      <div class="panel-body">
        <div class="col-sm-3">
         John hasn't read any books yet! Get him started!
        </div>
        <div class="col-sm-4">

        </div>
        <div class="col-sm-5">
          <div>
            <p>Select a book above or <input type='button' class='btn btn-xs btn-success' value="Add a Book To Bobby's Reading List"/></p>
          </div>
        </div>
      </div>
    </div>
    <div class="panel panel-primary">
      <div class="panel-heading">
        Jenny Jones (8)
      </div>
      <div class="panel-body">
        <div class="col-sm-3">
          Jenny has read for a total of <strong>135</strong> minutes.
        </div>
        <div class="col-sm-4">
          <ul class="list-unstyled">
            <li class="alert alert-info">
              Nature (Emerson) (100 minutes)
              <div>
                <input type='button' class='btn btn-primary btn-xs' value='Select This Book' />
              </div>
            </li>
            <li class="alert alert-info">
              History of Philosophy (35 minutes)
              <div>
                <input type='button' class='btn btn-primary btn-xs' value='Select This Book' />
              </div>
            </li>
          </ul>
        </div>
        <div class="col-sm-5">
          <div>
            <select class='form-control'>
              <option>Pokemon Player's Guide</option>
              <option>Destiny Player's Guide</option>
           </select>
            <div>
              <input type='button' class='btn btn-primary form-control' value="Add this to Jenny's Reading List" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        Jimmy Curtis (13)
      </div>
      <div class="panel-body">
        <div class="col-sm-3">
          Jimmy has read for a total of <strong>4</strong> minutes.
        </div>
        <div class="col-sm-4">
          <ul class="list-unstyled">
            <li class="alert alert-success">
              Pokemon Player's Guide (3 minutes)
              <div>
                <input type='button' class='btn btn-primary btn-xs' value='Select This Book' />
              </div>
            </li>
            <li class="alert alert-info">
              History of Philosophy (1 minutes)
              <div>
                <input type='button' class='btn btn-primary btn-xs disabled' value='Select This Book' />
              </div>
            </li>
          </ul>
        </div>
        <div class="col-sm-5">
          <form>
            <div class="form-group">
              Jimmy has read this book for 3 minutes already.
            </div>
            <div class="form-group">
              <label for="time">Minutes to Add</label>
              <input class='form-control' name="time" type='number' />
            </div>
            <div class="form-group">
              <label for="pages">Pages Read</label>
              <input class='form-control' name="pages" type='number' />
            </div>
            <div class="form-group">
              <label>
                 <input type='checkbox'> Has Jimmy Completed This book?
               </label>

            </div>
            <div class="form-group">
              <input type='submit' value='Record' class='btn btn-primary' />
              <input type='button' value='Cancel' class='btn btn-danger' />
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <ngrx-store-log-monitor toggleCommand="ctrl-h" positionCommand="ctrl-m"></ngrx-store-log-monitor>
</div>