<!DOCTYPE html> <html ng-app="mailhogApp"> <head> <title>MailHog</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.js"></script> <script src="/js/strutil.js"></script> <script src="/js/controllers.js"></script> <style> body, html { height: 100%; overflow: hidden; } .navbar { margin-bottom: 0; position: absolute; top: 0; right: 0; width: 100%; border-bottom: 1px solid #ccc; } .navbar-header img { height: 35px; margin: 8px 0 0 5px; float: left; } .navbar-nav.navbar-right:last-child { margin-right: 0; /* bootstrap fix?! */ } .ajax-loader { background: url('/images/ajax-loader.gif'); width: 16px; height: 16px; display: inline-block; } .ajax-event { padding: 5px; width: 225px; } .ajax-event h1 { font-size: 1em; padding: 2px; margin: 0; padding-left: 20px; } .ajax-event h2 { font-size: 0.8em; padding: 2px; margin: 0; padding-left: 20px; } .ajax-event .glyphicon { float: left; padding: 1px; color: #666; } .dropdown-menu .glyphicon { padding: 1px; margin-right: 5px; color: #666; } .dropdown-menu > li > a { padding: 3px 10px; } /* http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box */ .left-inner-addon { position: relative; } .left-inner-addon input { padding-left: 30px; } .left-inner-addon i { color: #aaa; position: absolute; padding: 9px 10px; pointer-events: none; } .ev_good { color: green; } .ev_bad { color: red; } </style> </head> <body ng-controller="MailCtrl"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="navbar-header"> <img src="/images/hog.png"> <a class="navbar-brand" href="#">MailHog</a> </div> <ul class="nav navbar-nav navbar-left navbar-subtext"> <li> <a>[: .config.Hostname :]</a> </li> <li> <a>{{ messagesDisplayed() }} {{ searchText ? "of " + messages.length : "" }} messages</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li ng-if="eventCount > 0" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span ng-if="eventCount > eventDone" class="ajax-loader"></span> {{ eventCount - eventDone }} pending<span ng-if="eventFailed > 0"> ({{ eventFailed}} failed)</span> <span ng-if="eventDone > 0"> ({{ eventDone}} complete)</span> <b class="caret"></b> </a> <ul class="dropdown-menu"> <li ng-class="e.getClass()" ng-repeat="(id, e) in eventsPending" class="ajax-event"> <span class="glyphicon {{ e.glyphicon }}"></span> <button ng-if="e.failed" ng-click="e.remove()" class="btn btn-xs btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button> <h1>{{ e.name }}</h1> <h2 ng-if="e.args">{{ e.args }}</h2> <h2 ng-if="e.error">{{ e.error }}</h2> </li> </ul> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Event stream connected" ng-click="toggleStream()"> <span class="glyphicon glyphicon-asterisk {{ hasEventSource ? 'ev_good' : 'ev_bad' }}"></span> </a> </li> <li> <form class="navbar-form navbar-left" role="search"> <div class="form-group left-inner-addon"> <i class="glyphicon glyphicon-search"></i> <input ng-model="searchText" type="text" class="form-control" placeholder="Search"> </div> </form> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#" ng-click="refresh()"><span class="glyphicon glyphicon-download"></span> Refresh</a></li> <li class="divider"></li> <li><a href="#" ng-click="deleteAll()"><span class="glyphicon glyphicon-remove-circle"></span> Delete all messages</a></li> </ul> </li> <li><a target="_blank" href="https://github.com/ian-kent/Go-MailHog"><img src="/images/github.png" style="width: 16px;" /> GitHub</a></li> </ul> </nav> [: .Content :] </body> </html>