chendeben
/
MailSend


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="MailHub — self-hosted transactional email with API, SMTP, DNS and webhooks." />
    <title>MailHub</title>
  </head>
  <body>
    <div class="page">
      <header class="site-header">
        <a class="brand" href="#top">
          <span class="brand-mark">MH</span>
          <span class="brand-name">MailHub</span>
        </a>
        <nav class="nav-links" aria-label="Primary">
          <a href="#features" data-i18n="nav.features">Features</a>
          <a href="#integrate" data-i18n="nav.integrate">Integrate</a>
          <a href="#api" data-i18n="nav.api">API</a>
          <a href="#smtp" data-i18n="nav.smtp">SMTP</a>
          <a href="#webhooks" data-i18n="nav.webhooks">Webhooks</a>
        </nav>
        <div class="header-actions">
          <div class="lang-switch" role="group" aria-label="Language">
            <button type="button" data-locale="zh-CN" class="lang-btn">中文</button>
            <button type="button" data-locale="en-US" class="lang-btn">EN</button>
          </div>
          <a
            class="btn btn-ghost"
            href="https://github.com/chendeben/MailHub"
            target="_blank"
            rel="noopener noreferrer"
            data-i18n="cta.github"
          >GitHub</a>
          <a class="btn btn-ghost" href="/login" data-i18n="cta.login">Log in</a>
          <a class="btn btn-primary" href="/register" data-i18n="cta.signup">Get started</a>
        </div>
      </header>

      <main id="top">
        <section class="hero">
          <div class="hero-copy">
            <p class="eyebrow" data-i18n="hero.eyebrow">Transactional email platform</p>
            <h1 data-i18n="hero.title">Send reliable email via API &amp; SMTP</h1>
            <p class="lede" data-i18n="hero.lede">
              Self-hosted MailHub gives you domain DNS guidance, DKIM signing, delivery logs, and signed webhooks — without locking you into a black-box SaaS.
            </p>
            <div class="hero-cta">
              <a class="btn btn-primary btn-lg" href="/register" data-i18n="cta.signup">Get started</a>
              <a class="btn btn-ghost btn-lg" href="#api" data-i18n="cta.viewApi">View API sample</a>
            </div>
            <ul class="trust-strip">
              <li data-i18n="trust.selfHosted">Self-hosted</li>
              <li>DKIM</li>
              <li>SPF</li>
              <li>DMARC</li>
              <li data-i18n="trust.webhooks">Delivery webhooks</li>
            </ul>
          </div>
          <div class="hero-code" aria-hidden="false">
            <div class="code-card">
              <div class="code-card-bar">
                <span>curl</span>
                <button type="button" class="copy-btn" data-copy-target="hero-curl" data-i18n="common.copy">Copy</button>
              </div>
              <pre id="hero-curl"><code data-i18n-html="hero.curl"></code></pre>
            </div>
          </div>
        </section>

        <section id="features" class="section">
          <div class="section-head">
            <h2 data-i18n="features.title">Built for production senders</h2>
            <p data-i18n="features.sub">Everything you need to authenticate domains and observe delivery.</p>
          </div>
          <div class="feature-grid">
            <article class="card"><h3 data-i18n="features.dns.title">Domains &amp; DNS</h3><p data-i18n="features.dns.body">Guided SPF, DKIM, DMARC, and one-click DNS provider writes.</p></article>
            <article class="card"><h3 data-i18n="features.smtp.title">SMTP Submission</h3><p data-i18n="features.smtp.body">App-friendly SMTP listeners with credentials you control.</p></article>
            <article class="card"><h3 data-i18n="features.api.title">HTTP Send API</h3><p data-i18n="features.api.body">Bearer tokens and a simple JSON send endpoint for apps and services.</p></article>
            <article class="card"><h3 data-i18n="features.logs.title">Delivery logs</h3><p data-i18n="features.logs.body">Track queue and MTA outcomes with searchable send history.</p></article>
            <article class="card"><h3 data-i18n="features.hooks.title">Webhooks</h3><p data-i18n="features.hooks.body">Signed callbacks for sent, bounced, and failed terminal events.</p></article>
            <article class="card"><h3 data-i18n="features.multi.title">Multi-user isolation</h3><p data-i18n="features.multi.body">Domains, tokens, and logs stay scoped to each account.</p></article>
          </div>
        </section>

        <section id="integrate" class="section section-alt">
          <div class="section-head">
            <h2 data-i18n="integrate.title">Three ways to integrate</h2>
            <p data-i18n="integrate.sub">Pick the path that matches your stack — configure after sign-in.</p>
          </div>
          <div class="integrate-grid">
            <article class="card">
              <h3 data-i18n="integrate.api.title">API</h3>
              <p data-i18n="integrate.api.body">Create an API token, then POST JSON to /api/send with Bearer auth.</p>
              <a class="text-link" href="#api" data-i18n="integrate.api.link">See API sample →</a>
            </article>
            <article class="card">
              <h3 data-i18n="integrate.smtp.title">SMTP</h3>
              <p data-i18n="integrate.smtp.body">Point your app at MailHub submission ports with per-user credentials.</p>
              <a class="text-link" href="#smtp" data-i18n="integrate.smtp.link">See SMTP details →</a>
            </article>
            <article class="card">
              <h3 data-i18n="integrate.hooks.title">Webhooks</h3>
              <p data-i18n="integrate.hooks.body">Subscribe endpoints to terminal delivery events with HMAC signatures.</p>
              <a class="text-link" href="#webhooks" data-i18n="integrate.hooks.link">See webhook events →</a>
            </article>
          </div>
        </section>

        <section id="api" class="section">
          <div class="section-head">
            <h2 data-i18n="api.title">Send API</h2>
            <p data-i18n="api.sub">Minimal JSON contract. Hostnames below are placeholders — replace with your MailHub host.</p>
          </div>
          <div class="code-card">
            <div class="code-card-bar">
              <span>POST /api/send</span>
              <button type="button" class="copy-btn" data-copy-target="api-curl" data-i18n="common.copy">Copy</button>
            </div>
            <pre id="api-curl"><code data-i18n-html="api.curl"></code></pre>
          </div>
          <ul class="field-list">
            <li><code>from</code> — <span data-i18n="api.field.from">sender address on a verified domain</span></li>
            <li><code>to</code> — <span data-i18n="api.field.to">recipient string or array</span></li>
            <li><code>subject</code> — <span data-i18n="api.field.subject">message subject</span></li>
            <li><code>text</code> / <code>html</code> — <span data-i18n="api.field.body">message body</span></li>
          </ul>
        </section>

        <section id="smtp" class="section section-alt">
          <div class="section-head">
            <h2 data-i18n="smtp.title">SMTP submission</h2>
            <p data-i18n="smtp.sub">Default listener ports (override in your deployment):</p>
          </div>
          <div class="port-grid">
            <div class="card mono"><strong>25</strong><span>smtp</span></div>
            <div class="card mono"><strong>587</strong><span>smtp / STARTTLS</span></div>
            <div class="card mono"><strong>465</strong><span>smtps</span></div>
            <div class="card mono"><strong>2525</strong><span>smtp</span></div>
          </div>
          <p class="note" data-i18n="smtp.note">Create SMTP login credentials in the console after registration. Host example: mail.example.com</p>
        </section>

        <section id="webhooks" class="section">
          <div class="section-head">
            <h2 data-i18n="webhooks.title">Delivery webhooks</h2>
            <p data-i18n="webhooks.sub">Terminal events only — signed HTTPS callbacks to your systems.</p>
          </div>
          <div class="table-wrap">
            <table>
              <thead>
                <tr>
                  <th data-i18n="webhooks.col.status">Status</th>
                  <th data-i18n="webhooks.col.type">type</th>
                </tr>
              </thead>
              <tbody>
                <tr><td><code>sent</code></td><td><code>email.sent</code></td></tr>
                <tr><td><code>bounced</code></td><td><code>email.bounced</code></td></tr>
                <tr><td><code>failed</code></td><td><code>email.failed</code></td></tr>
              </tbody>
            </table>
          </div>
          <p class="note"><span data-i18n="webhooks.sig">Signature header:</span> <code>X-MailHub-Signature: t=&lt;unix&gt;,v1=&lt;hmac&gt;</code></p>
        </section>

        <section class="section cta-band">
          <h2 data-i18n="ctaBand.title">Ready to send?</h2>
          <p data-i18n="ctaBand.sub">Create an account, add a domain, and ship your first message in minutes.</p>
          <div class="hero-cta">
            <a class="btn btn-primary btn-lg" href="/register" data-i18n="cta.signup">Get started</a>
            <a class="btn btn-ghost btn-lg" href="/login" data-i18n="cta.login">Log in</a>
          </div>
        </section>
      </main>

      <footer class="site-footer">
        <div>
          <strong>MailHub</strong>
          <span data-i18n="footer.tag">Self-hosted email delivery control plane</span>
        </div>
        <div class="footer-links">
          <a
            href="https://github.com/chendeben/MailHub"
            target="_blank"
            rel="noopener noreferrer"
            data-i18n="cta.github"
          >GitHub</a>
          <a href="/login" data-i18n="cta.login">Log in</a>
          <a href="/register" data-i18n="cta.signup">Get started</a>
        </div>
      </footer>
    </div>
    <script type="module" src="/src/frontend/landing/main.ts"></script>
  </body>
</html>