<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mail</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../../dist/css/ratchet.min.css"> <link rel="stylesheet" href="../../dist/css/ratchet-theme-ios.min.css"> <link rel="stylesheet" href="css/app.css"> <script src="../../dist/js/ratchet.min.js"></script> </head> <body> <header class="bar bar-nav"> <a class="icon icon-refresh pull-right"></a> <h1 class="title">Mailboxes</h1> </header> <div class="bar bar-footer"> <a class="icon icon-compose pull-right" href="#composeModal"></a> <small class="updated-text">Updated just now</small> </div> <div class="content"> <ul class="table-view"> <li class="table-view-cell media"> <a class="navigate-right" href="inbox.html" data-transition="slide-in"> <span class="media-object icon icon-pages pull-left"></span> <div class="media-body"> All inboxes </div> </a> </li> <li class="table-view-cell media"> <a class="navigate-right" href="inbox.html" data-transition="slide-in"> <span class="media-object icon icon-person pull-left"></span> <div class="media-body"> Personal email </div> </a> </li> <li class="table-view-cell media"> <a class="navigate-right" href="inbox.html" data-transition="slide-in"> <span class="media-object icon icon-star-filled pull-left"></span> <div class="media-body"> Starred </div> </a> </li> <li class="table-view-cell media"> <a class="navigate-right" href="inbox.html" data-transition="slide-in"> <span class="media-object icon icon-trash pull-left"></span> <div class="media-body"> Trash </div> </a> </li> </ul> <h5 class="content-padded">Other accounts</h5> <ul class="table-view"> <li class="table-view-cell media"> <a class="navigate-right" href="inbox.html" data-transition="slide-in"> <span class="media-object icon icon-more pull-left"></span> <div class="media-body"> Misc </div> </a> </li> </ul> </div><!-- /.content --> <!-- Compose modal --> <div id="composeModal" class="modal"> <header class="bar bar-nav"> <a class="btn btn-link pull-right" href="#composeModal"> <strong>Send</strong> </a> <a class="btn btn-link pull-left" href="#composeModal"> Cancel </a> <h1 class="title">New message</h1> </header> <div class="content"> <form class="input-group"> <input type="text" placeholder="To:"> <input type="email" placeholder="From:"> <input type="text" placeholder="Subject:"> <textarea rows="20"></textarea> </form> </div> </div><!-- /.modal --> </body> </html>