@timshel_npm/maildev
Version:
SMTP Server with async API and Web Interface for viewing and testing emails during development
177 lines (136 loc) • 8.4 kB
HTML
<html ng-app="mailDevApp" ng-controller="MainCtrl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>MailDev{{ unreadItems > 0 ? ' (+' + unreadItems + ')' : '' }}</title>
<meta name="description" content="SMTP Server + Web Interface for viewing and testing emails during development.">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" id="favicon" />
</head>
<body ng-class="{'dark-theme': settings.darkThemeEnabled}">
<div class="application-container">
<div class="sidebar">
<div class="sidebar-header">
<div class="brand-container">
<a class="brand ng-cloak" href="#/">
<i class="fas fa-envelope"></i>
<span class="brand-text">MailDev</span>
</a>
<span class="brand-unread ng-cloak" title="Total emails count (+ unread emails count)" ng-if="items && items.length" ng-click="toggleHeaderCountsUnread()">
{{items.length}} {{ unreadItems > 0 ? ' (+' + unreadItems + ')' : '' }}
</span>
</div>
<div class="header-nav ng-cloak" >
<ul class="header-nav-list">
<li class="header-nav-item">
<a ng-click="refreshList()" href="" class="header-nav-item-link" title="Refresh emails">
<i class="fas fa-sync"></i>
</a>
</li>
<li class="header-nav-item">
<a ng-click="markReadAll()" href="" class="header-nav-item-link" title="Mark all emails as read">
<i class="fas fa-check-double"></i>
</a>
</li>
<li class="header-nav-item">
<a ng-click="deleteAll()" href="" class="header-nav-item-link" title="Delete all emails">
<i ng-if="deleteAllSafeguard" class="fas fa-trash-alt"></i>
<i ng-if="!deleteAllSafeguard" class="fas fa-trash-alt danger"></i>
</a>
</li>
<li class="header-nav-item">
<a ng-click="toggleDarkTheme()" href="" class="header-nav-item-link" title="Toggle between light and dark theme">
<i ng-if="settings.darkThemeEnabled" class="fas fa-sun"></i>
<i ng-if="!settings.darkThemeEnabled" class="fas fa-moon"></i>
</a>
</li>
<li class="header-nav-item">
<a ng-click="toggleNavMore($event)" href="" class="header-nav-item-link" title="Additional configuration">
<i class="fas fa-cog"></i>
</a>
</li>
</ul>
<div class="header-nav-more" ng-click="headerNavStopPropagation($event)">
<ul class="dropdown-menu header-nav-more-menu" ng-class="{ open: navMoreOpen }">
<li>
<label
class="header-nav-switch"
ng-class="{ disabled: !notificationsSupported }"
for="toggle-notifications"
title="Notifications are supported on localhost or via https">
<input
type="checkbox"
name="notifications"
id="toggle-notifications"
ng-disabled="!notificationsSupported"
ng-checked="settings.notificationsEnabled"
ng-click="toggleNotifications()"/>
Browser notifications
</label>
</li>
<li>
<label
class="header-nav-switch"
for="toggle-auto-show" >
<input
type="checkbox"
name="auto-show"
id="toggle-auto-show"
ng-checked="settings.autoShowEnabled"
ng-click="toggleAutoShow()"/>
Open new mail
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="sidebar-emails-container ">
<div class="search-container ng-cloak">
<input type="text" ng-model="search" class="search-input" placeholder="Search...">
<i class="fas fa-search search-icon"></i>
</div>
<div class="sidebar-scrollable-content ng-cloak">
<div ng-if="itemsLoading" class="emails-loading">
Loading...
</div>
<div ng-if="!itemsLoading && items && !items.length" class="emails-empty">
No emails
</div>
<ul class="email-list">
<li ng-repeat="item in items | orderBy:'date':!reverse | filter: search " class="email-item email-{{item.id}} " ng-class="{current: item.id === currentItemId, read: item.isRead, unread: !item.isRead}">
<a href="#/email/{{item.id}}" class="email-item-link">
<span class="title">
{{item.subject}}<span ng-hide="!item.hasAttachment"> <i class="fas fa-paperclip" ></i></span>
<span class="title-subline" title="{{item.to}}">
To: {{item.to.0.address}} <span ng-if="item.to.length > 1">+{{item.to.length-1}}</span>
</span>
</span>
<span class="subline">
{{item.date | date:'yyyy-MM-dd HH:mm:ss (Z)' }}
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main-container ng-cloak">
<div class="email-container" ng-view></div>
</div>
</div>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="components/angular-cookies/angular-cookies.min.js"></script>
<script src="components/socket.io/socket.io.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/components/address.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/item.js"></script>
</body>
</html>