node-mailbox
Version:
A development email preview tool inspired by Phoenix Swoosh - capture and preview emails in a web UI without SMTP
185 lines (177 loc) • 7.04 kB
HTML
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="__PATH__/styles.css" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/png" href="__PATH__/assets/logo.png" />
<title>__APP_NAME__ - Dev Mailbox</title>
</head>
<body class="animate-slideUp">
<div class="header">
<div class="header-left">
<div class="logo-wrapper">
<img
src="__PATH__/assets/logo.png"
alt="Dev Mailbox Logo"
style="height: 40px"
/>
<div>
<p style="color: var(--accent-hover); font-weight: 700">
__APP_NAME__
</p>
<h2 style="font-size: 20px">Dev Mailbox</h2>
</div>
</div>
<div class="search-box">
<input
type="text"
class="search-input"
placeholder="Search emails..."
id="search-input"
/>
<span class="search-icon">🔍</span>
</div>
</div>
<div class="header-actions">
<span class="email-count" id="email-count">Loading...</span>
<span class="sync-status" id="sync-status"></span>
<button
class="theme-toggle"
onclick="refreshInbox()"
title="Toggle theme"
>
Refresh Inbox
</button>
<button
class="theme-toggle"
onclick="toggleTheme()"
title="Toggle theme"
>
<span id="theme-icon">🌙</span>
</button>
<button
id="clear-all-btn"
class="btn btn-danger"
onclick="clearAllEmails()"
>
Clear All
</button>
</div>
</div>
<div class="main-container">
<div class="sidebar">
<div class="email-list" id="email-list">
<div class="loading">Loading emails...</div>
</div>
<div class="sidebar-footer">
<a
href="https://github.com/Elue-dev/node-mailbox"
target="_blank"
rel="noopener"
style="font-weight: 700; color: var(--text-primary)"
>
<img src="__PATH__/assets/github.svg" alt="GitHub" />
Give us a star
</a>
</div>
</div>
<div class="content-area">
<div class="empty-state" id="empty-state">
<img
src="__PATH__/assets/mail.svg"
style="width: 75px; height: 100px"
/>
<h3>No email selected</h3>
<p>Choose an email from the list to view its content</p>
</div>
<div
class="email-detail-header"
id="email-detail-header"
style="display: none"
>
<h2 id="email-title"></h2>
<div class="email-meta-row">
<span class="email-meta-label">From:</span>
<span
class="email-meta-value"
id="email-from-detail"
></span>
</div>
<div class="email-meta-row">
<span class="email-meta-label">To:</span>
<span
class="email-meta-value"
id="email-to-detail"
></span>
</div>
<div class="email-meta-row">
<span class="email-meta-label">Date:</span>
<span
class="email-meta-value"
id="email-date-detail"
></span>
</div>
<div class="email-actions">
<button
class="btn btn-outline"
onclick="deleteCurrentEmail()"
>
🗑️ Delete
</button>
</div>
</div>
<div
class="email-preview"
id="email-preview"
style="display: none"
></div>
</div>
</div>
<div class="modal-overlay" id="confirmation-modal">
<div class="modal">
<div class="modal-header">
<div class="modal-icon danger" id="modal-icon">
<img
src="__PATH__/assets/warn.svg"
style="width: 35px; height: 100px"
/>
</div>
<div class="modal-title" id="modal-title">
Confirm Action
</div>
<div class="modal-message" id="modal-message">
Are you sure you want to proceed?
</div>
</div>
<div class="modal-body">
<div class="modal-actions">
<button
class="btn btn-secondary"
onclick="closeConfirmationModal()"
>
Cancel
</button>
<button
class="btn btn-danger"
id="confirm-action-btn"
onclick="confirmAction()"
>
Confirm
</button>
</div>
</div>
</div>
</div>
<script>
window.DEV_MAILBOX_PATH = "__PATH__";
</script>
<script src="__PATH__/script.js"></script>
</body>
</html>