mirror of
https://gitlab.com/ric_harvey/MailHog.git
synced 2024-11-27 16:24:04 +00:00
146 lines
5.2 KiB
HTML
146 lines
5.2 KiB
HTML
<!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>
|