162 lines
5.0 KiB
HTML
162 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0"
|
|
>
|
|
|
|
<title>{{.Title}}</title>
|
|
|
|
<script src="/static/tailwind.js"></script>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/app.css"
|
|
>
|
|
</head>
|
|
|
|
<body class="bg-gray-100">
|
|
<div class="max-w-6xl mx-auto bg-white min-h-screen shadow-sm">
|
|
|
|
<!-- Header -->
|
|
<header class="bg-gray-800 text-white px-6 py-4 border-b-4 border-red-600">
|
|
<h1 class="text-2xl font-normal">
|
|
Fake SMTP Server
|
|
</h1>
|
|
|
|
<p class="text-gray-400 text-sm mt-1">
|
|
Email storage
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<main class="p-4">
|
|
|
|
{{range .Days}}
|
|
|
|
<section class="mb-6 border border-gray-200">
|
|
|
|
<!-- Day header -->
|
|
<div class="bg-gray-50 px-4 py-2 border-b border-gray-200 flex justify-between items-center">
|
|
<h2 class="text-base font-semibold text-gray-700">
|
|
{{.Date}}
|
|
</h2>
|
|
|
|
<span class="bg-gray-400 text-white px-2 py-0.5 text-xs">
|
|
{{len .Emails}} emails
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Emails -->
|
|
<div class="divide-y divide-gray-100">
|
|
|
|
{{range .Emails}}
|
|
|
|
<article
|
|
class="email-item"
|
|
data-id="{{.ID}}"
|
|
>
|
|
|
|
<!-- Email summary -->
|
|
<div
|
|
class="email-summary px-4 py-2 hover:bg-gray-50 cursor-pointer flex justify-between items-center"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="false"
|
|
>
|
|
<div class="flex-1 flex flex-wrap gap-4 items-baseline">
|
|
|
|
<div class="font-mono text-sm font-semibold text-gray-700 min-w-[180px]">
|
|
{{.From}}
|
|
</div>
|
|
|
|
<div class="font-mono text-xs text-gray-400 min-w-[180px]">
|
|
→ {{.To}}
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-600 flex-1">
|
|
{{.Subject}}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 text-gray-400 text-xs">
|
|
|
|
<span class="font-mono">
|
|
{{.ModTime.Format "15:04:05"}}
|
|
</span>
|
|
|
|
<span class="font-mono">
|
|
{{.Size}} bytes
|
|
</span>
|
|
|
|
<button
|
|
type="button"
|
|
class="download-icon text-base cursor-pointer hover:text-gray-600"
|
|
title="Download EML"
|
|
aria-label="Download email"
|
|
>
|
|
💾
|
|
</button>
|
|
|
|
<span
|
|
class="toggle text-xs"
|
|
aria-hidden="true"
|
|
>
|
|
▼
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email detail -->
|
|
<div class="email-detail hidden bg-gray-50 border-t border-gray-200 p-4">
|
|
<div class="email-content-wrapper">
|
|
|
|
<iframe
|
|
class="email-content-frame"
|
|
title="Email content"
|
|
sandbox="allow-same-origin allow-popups"
|
|
srcdoc="<html><body style='margin:0;padding:15px;font-family:monospace;font-size:12px;'>Loading...</body></html>"
|
|
></iframe>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</article>
|
|
|
|
{{end}}
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{{else}}
|
|
|
|
<div class="text-center py-16 text-gray-400">
|
|
|
|
<div class="text-4xl mb-3">
|
|
📭
|
|
</div>
|
|
|
|
<h3 class="text-lg text-gray-500 mb-2">
|
|
No emails
|
|
</h3>
|
|
|
|
<p class="text-sm">
|
|
No emails have been saved yet
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{{end}}
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|