86 lines
5.2 KiB
HTML
86 lines
5.2 KiB
HTML
|
{{define "base"}}<!DOCTYPE html>
|
||
|
|
<html lang="en" class="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>{{template "title" .}} — mailgosend</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script>tailwind.config={darkMode:'class'}</script>
|
||
|
|
<style>
|
||
|
|
body{font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px}
|
||
|
|
.sidebar{width:200px;min-width:200px;background:#111827;border-right:1px solid #1f2937;min-height:100vh;display:flex;flex-direction:column;padding:.75rem 0}
|
||
|
|
.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:.375rem .875rem;border-radius:.25rem;margin:0 .375rem;color:#9ca3af;cursor:pointer;text-decoration:none;font-size:.8125rem}
|
||
|
|
.sidebar-item:hover{background:#1f2937;color:#f9fafb}
|
||
|
|
.sidebar-item.active{background:#1e3a5f;color:#93c5fd}
|
||
|
|
.sidebar-section{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#4b5563;padding:.5rem .875rem .25rem;margin-top:.5rem}
|
||
|
|
.unread-badge{background:#1d4ed8;color:#fff;font-size:.65rem;padding:.1rem .35rem;border-radius:.75rem;font-weight:600;min-width:1.1rem;text-align:center}
|
||
|
|
.btn{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:.375rem;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:background .15s}
|
||
|
|
.btn-primary{background:#1d4ed8;color:#fff}.btn-primary:hover{background:#1e40af}
|
||
|
|
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
|
||
|
|
.btn-ghost{background:transparent;color:#9ca3af;border:1px solid #374151}.btn-ghost:hover{background:#1f2937;color:#f9fafb}
|
||
|
|
.btn-sm{padding:.25rem .625rem;font-size:.75rem}
|
||
|
|
.msg-row{display:grid;align-items:center;padding:.5rem .875rem;border-bottom:1px solid #1f2937;cursor:pointer;gap:.5rem;grid-template-columns:auto 1fr auto auto}
|
||
|
|
.msg-row:hover{background:#111827}
|
||
|
|
.msg-row.unread{background:#0a1628}
|
||
|
|
.msg-row.unread .msg-subject{font-weight:600;color:#f9fafb}
|
||
|
|
.msg-from{font-size:.75rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
|
||
|
|
.msg-subject{color:#d1d5db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
|
|
.msg-date{font-size:.7rem;color:#4b5563;white-space:nowrap}
|
||
|
|
.flash-ok{background:#064e3b;border:1px solid #065f46;color:#6ee7b7;padding:.625rem .875rem;border-radius:.375rem;margin-bottom:.875rem;font-size:.8125rem}
|
||
|
|
.flash-err{background:#7f1d1d;border:1px solid #991b1b;color:#fca5a5;padding:.625rem .875rem;border-radius:.375rem;margin-bottom:.875rem;font-size:.8125rem}
|
||
|
|
input,select,textarea{background:#1f2937;border:1px solid #374151;border-radius:.375rem;color:#f9fafb;padding:.375rem .625rem;font-size:.875rem;width:100%;box-sizing:border-box}
|
||
|
|
input:focus,select:focus,textarea:focus{outline:none;border-color:#3b82f6}
|
||
|
|
label{display:block;font-size:.75rem;color:#6b7280;margin-bottom:.2rem}
|
||
|
|
.field{margin-bottom:.75rem}
|
||
|
|
.tag{display:inline-block;padding:.1rem .3rem;border-radius:.2rem;font-size:.65rem;font-weight:600}
|
||
|
|
.tag-green{background:#064e3b;color:#6ee7b7}
|
||
|
|
.tag-red{background:#7f1d1d;color:#fca5a5}
|
||
|
|
.tag-blue{background:#1e3a5f;color:#93c5fd}
|
||
|
|
.tag-gray{background:#1f2937;color:#6b7280}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gray-950 text-gray-300 flex h-screen overflow-hidden" style="background:#0d1117">
|
||
|
|
|
||
|
|
{{if .User}}
|
||
|
|
<!-- Sidebar -->
|
||
|
|
<div class="sidebar flex-shrink-0">
|
||
|
|
<div style="padding:.5rem .875rem .75rem;border-bottom:1px solid #1f2937;margin-bottom:.25rem">
|
||
|
|
<div style="font-size:.75rem;font-weight:600;color:#f9fafb">{{.User.DisplayName}}</div>
|
||
|
|
<div style="font-size:.7rem;color:#4b5563">{{.User.Email}}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="/compose" class="btn btn-primary btn-sm" style="margin:.5rem .625rem .75rem;display:block;text-align:center">Compose</a>
|
||
|
|
|
||
|
|
<div class="sidebar-section">Folders</div>
|
||
|
|
{{range .Mailboxes}}
|
||
|
|
<a href="/mail/{{.ID}}" class="sidebar-item {{if $.CurrentBoxID}}{{if eq $.CurrentBoxID .ID}}active{{end}}{{end}}">
|
||
|
|
<span>{{if mailboxLabel .Type}}{{mailboxLabel .Type}}{{else}}{{.Name}}{{end}}</span>
|
||
|
|
</a>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
<div style="margin-top:auto;padding:.75rem .875rem 0;border-top:1px solid #1f2937">
|
||
|
|
<a href="/settings" class="sidebar-item" style="margin:0;padding:.25rem 0;font-size:.75rem">Settings</a>
|
||
|
|
<a href="/logout" class="sidebar-item" style="margin:0;padding:.25rem 0;font-size:.75rem;color:#4b5563">Logout</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main -->
|
||
|
|
<div style="flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0">
|
||
|
|
{{if .Flash}}<div class="flash-ok" style="margin:.625rem .875rem 0;border-radius:.375rem">{{.Flash}}</div>{{end}}
|
||
|
|
{{if .Error}}<div class="flash-err" style="margin:.625rem .875rem 0;border-radius:.375rem">{{.Error}}</div>{{end}}
|
||
|
|
{{template "content" .}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{else}}
|
||
|
|
<!-- Public pages (login) -->
|
||
|
|
<div style="flex:1;display:flex;align-items:center;justify-content:center">
|
||
|
|
{{if .Flash}}<div class="flash-ok" style="position:fixed;top:1rem;left:50%;transform:translateX(-50%)">{{.Flash}}</div>{{end}}
|
||
|
|
{{if .Error}}<div class="flash-err" style="position:fixed;top:1rem;left:50%;transform:translateX(-50%)">{{.Error}}</div>{{end}}
|
||
|
|
{{template "content" .}}
|
||
|
|
</div>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
{{end}}
|